Блог

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

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

Проблема

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

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

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

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

Ответы не приняты

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

HTML — запасной вариант, если jsfiddle не работает

 <ul>
<li class="widget_categories">
    <h4>Kategorier</h4>
    <ul> 
        <li>
            <a href="#">Belysning amp;amp; lampor</a> 
        </li> 
        <li>
            <a href="#">Datorer amp;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;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;
}
  

* { 
 запас: 0; 
 заполнение: 0;
}

.widget_categories li, .widget_categories li a { 
 шрифт: обычный 11px / 18px Arial;
 цвет: #fff;
 оформление текста: отсутствует;
}
.дочерние элементы > li { 
 отступ слева: 20 пикселей; 
}
.widget_categories li {

 отображение: блок;

 фон: #a7cfdf; /* старые браузеры */
 фон: -moz-линейный градиент (верхний, #a7cfdf 0%, #23538a 100%); /* firefox */

 фон: -webkit-градиент (линейный, левый верхний, левый нижний, остановка цвета (0%, #a7cfdf), остановка цвета (100%, #23538a)); /* webkit */

 фильтр: progid:DXImageTransform.Microsoft.gradient ( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0); /* ie */

 фон: -o-линейный-градиент (верхний, #a7cfdf 0%, #23538a 100%); /* opera */

}
.widget_categories li a { 
 фон: #a7cfdf; /* старые браузеры */
 фон: -moz-линейный градиент (верхний, #a7cfdf 0%, #23538a 100%); /* firefox */

 фон: -webkit-градиент (линейный, левый верхний, левый нижний, остановка цвета (0%, #a7cfdf), остановка цвета (100%, #23538a)); /* webkit */

 фильтр: progid:DXImageTransform.Microsoft.gradient ( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0); /* ie */

 фон: -o-линейный-градиент (верхний, #a7cfdf 0%, #23538a 100%); /* opera */
 отображение: встроенный блок;
 отступ: 5 пикселей;
 ширина: 100%; 
}

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