分层列表背景

时间:2011-05-03 07:23:09

标签: jquery html css hierarchy

我在

有一个包含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;
}

1 个答案:

答案 0 :(得分: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/