我有一份名单,有CSS和超文本。

rel=“nofollow> http://jsfiddle.net/RyYem/2/。

<><>Problem

现在非常认真地聆听了意见。

• The the list item link texts should be indented like it is in the code.
• The background to the list items OR anchor tags should start from the left edge and end to the right edge.
• Look at this screenshot of an example: http://crazyindian.yolasite.com/resources/owa-screenshot.jpg. Down to the left it says "Inbox", "Calendar" and so on. Ignore the icons and look at the background. It s set from the left edge to the right. It should look a bit like that even when text is indented in my list.
• Notice that some li-elements contains more than an anchor-tag. That s why it don t work perfectly to set a background to the li-elements.
• I added backgrounds to both li and a-elements just to show how it looks. One of them is enough (look at the example).

www.un.org/Depts/DGACM/index_spanish.htm 接受的答复

• CSS2
• CSS3
• jQuery
• Hints

www.un.org/Depts/DGACM/index_spanish.htm 未接受的答复

• Change in the HTML

www.un.org/Depts/DGACM/index_spanish.htm 页: 1

<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不从事t work,则秋季

* {
    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;
}