html - li元素背后的背景

Question

我有一个（可由 js 扩展）列表，格式如下：

<ul>
    <li>
        <span class="arrow"></span>
        <span class="icon"></span>
        <span class="title">blah</span>
        <ul>
             <li>
                <span class="arrow"></span>
                <span class="icon"></span>
                <span class="title">blah</span>
                <ul>
                    ...
                </ul>
             </li>
        </ul>
    </li>
    <li>
        <span class="arrow"></span>
        <span class="icon"></span>
        <span class="title">blah</span>
        <ul>
    ...
</ul>

给出一个典型的布局：

 - X blah
    - X blah
       . X blah
       - X blah
         . X blah
         . X blah
    - X blah
       . X blah
       . X blah
       . X blah
    + X blah
- X blah
    - X blah

我想<li>通过为一个或多个项目设置背景来突出个人的。有序或分开。有没有办法让它填满整个“线”？

比如说选择 blah 2 我想：

 |===================| <- this range
 - blah 1
     + blah 2
     |===============| <- not this

当我得到：

.selected {
    background : url('./img/selected.png') repeat-x;
}

我试过摆弄边距等，但无法让它以我想要的方式呈现。

有任何想法吗？

编辑：

例如，就像此处“组和项目”下的选定行一样。

编辑2：

小提琴更新http://jsfiddle.net/zEShd/3/

Answer 1

>>this fiddle<<你想要达到什么目的？

这是示例html：

<ul class="level1">
    <li>level 1</li>
    <li>level 1
        <ul class="level2">
            <li>level 2</li>
            <li>level 2</li>
            <li>level 2
                <ul class="level3">
                    <li>level 3</li>
                    <li>level 3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

这是示例CSS：

body
{
    margin:0;
}
ul
{
    margin:0;
    padding:0;
    list-style:none;
}
ul.level1 > li
{
    background-color:#ffff00;
}
ul.level2 > li
{
    background-color:#ff0000;
    padding-left:20px;
}
ul.level3 > li
{
    background-color:#ccc;
    padding-left:40px;
    margin-left:-20px;
}

这是第二个小提琴，通过点击突出显示。

我通过在单击的li元素后面创建绝对定位的 div 来做到这一点。

Answer 2

如果没有看到一个实例，很难确切地知道发生了什么，但这可能是由于大多数浏览器的默认行为，即为嵌套ul元素添加填充。

尝试：

CSS

ul ul {
   padding:0;
   margin:0;
}

或者（更好）使用Eric Meyer 的 CSS 重置来删除这些默认值。或者让他们“明智”规范化