背景

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>的通過設置一個或多個項目的背景。 按順序或分開。有沒有辦法讓它填補整條「線」？

比方說廢話2中選擇，我想：

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

正如我得到：

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

我試圖與利潤率等擺弄周圍，但它不能得到呈現我想要的方式。

任何想法？

編輯：

例如就像下的選定行「組&項目」這裏。

EDIT2：

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

Answer 1

沒有看到一個活生生的例子，它是很難知道到底是怎麼回事，但是這可能是由於大多數瀏覽器的默認行爲是將填充添加到嵌套的ul元素。

嘗試：

CSS

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

或（更好）使用Eric Meyer's CSS reset刪除這些默認值。或讓他們「明智」Normalize

Answer 2

是>>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來實現。