在li元素后的背景

时间:2013-04-07 01:57:50

标签: html css

我有一个(可由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/

2 个答案:

答案 0 :(得分: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来实现的。

答案 1 :(得分:0)

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

尝试:

<强> CSS

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

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