Question

我在

有一个包含CSS和HTML的列表

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

问题

现在仔细听。

列表项链接文本应该像在代码中一样缩进。
列表项OR锚标记的背景应从左边缘开始，到右边缘结束。
查看示例的屏幕截图：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;
}

Answer 1

* {
    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/

分层列表背景

1 个答案: