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

我试图摆弄边缘等但却无法按照我喜欢的方式进行渲染。

有什么想法吗？

编辑：

E.g。比如“Groups＆amp; Items”下的选定行。

enter image description here bg_slected_tree

EDIT2：

小提琴更新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;
}

这是第二个fiddle，通过点击突出显示。

我是通过在点击的li元素后面创建绝对定位div来实现的。

Answer 2

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

尝试：

<强> CSS

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

或（更好）使用Eric Meyer's CSS reset删除这些默认值。或者让他们“明智”Normalize

在li元素后的背景

2 个答案: