Фон иерархического списка - PullRequest
Новая
       0

Фон иерархического списка

0 голосов
/ 03 мая 2011

У меня есть список с CSS и HTML на

http://jsfiddle.net/RyYem/2/

Проблема

Теперь слушайте очень внимательно.

  • Текст ссылки на элемент списка должен иметь отступ, как в коде.
  • Фон для элементов списка ИЛИ теги привязки должны начинаться с левого края и заканчиваться правым краем.
  • Посмотрите на этот снимок экрана с примером: http://crazyindian.yolasite.com/resources/owa-screenshot.jpg. Слева внизу написано "Входящие", "Календарь" и так далее.Игнорируйте значки и смотрите на фон.Он установлен от левого края до правого.Это должно выглядеть примерно так, даже если текст в моем списке имеет отступ.
  • Обратите внимание, что некоторые li-элементы содержат больше, чем тег привязки.Вот почему он не работает идеально, чтобы установить фон для li-элементов.
  • Я добавил фоны для li и a-elements, просто чтобы показать, как это выглядит.Одного из них достаточно (см. Пример).

Принятые ответы

  • CSS2
  • CSS3
  • jQuery
  • Подсказки

Не приняты ответы

  • Изменение в HTML

HTML - Откат, если jsfiddle не работает 

<ul>
<li class="widget_categories">
    <h4>Kategorier</h4>
    <ul> 
        <li>
            <a href="#">Belysning &amp; lampor</a> 
        </li> 
        <li>
            <a href="#">Datorer &amp; tillbehör</a> 
            <ul class='children'> 
                <li>
                    <a href="#">iPad-tillbehör</a> 
                </li> 
                <li>
                    <a href="#">USB-tillbehör</a> 
                </li> 
            </ul> 
        </li> 
        <li>
            <a href="#">Filmkameror</a> 
            <ul class='children'> 
                <li>
                    <a href="#">Spionkameror</a> 
                </li> 
            </ul> 
        </li> 
        <li>
            <a href="#">Hörlurar</a> 
        </li> 
        <li>
            <a href="#">Kameror &amp; tillbehör</a> 
        </li> 
        <li>
            <a href="#">Övrigt</a> 
        </li> 
    </ul> 
</li> 
</ul>

CSS - Откат, если jsfiddle не работает 

* {
    margin: 0;
    padding: 0;
}

.widget_categories li, .widget_categories li a {
    font: normal 11px/18px Arial;
    color: #fff;
    text-decoration: none;
}

.widget_categories li {
    margin-left: 20px;
    display: block;

    background: #7d7e7d; /* old browsers */
    background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* webkit */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* ie */

    background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); /* opera */

}
.widget_categories li a {
    background: #a7cfdf; /* old browsers */
    background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* webkit */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* ie */

    background: -o-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* opera */
    display: inline-block;
    padding: 5px;
}

1 Ответ

1 голос
/ 03 мая 2011 
* {
    margin: 0;
    padding: 0;
}

.widget_categories li, .widget_categories li a {
    font: normal 11px/18px Arial;
    color: #fff;
    text-decoration: none;
}
.children > li {
 padding-left: 20px;   
}
.widget_categories li {

    display: block;

    background: #a7cfdf; /* old browsers */
    background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* webkit */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* ie */

    background: -o-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* opera */

}
.widget_categories li a {
    background: #a7cfdf; /* old browsers */
    background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%); /* firefox */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* webkit */

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* ie */

    background: -o-linear-gradient(top, #a7cfdf 0%,#23538a 100%); /* opera */
    display: inline-block;
    padding: 5px;
    width: 100%;
}

http://jsfiddle.net/RyYem/4/

...