ul李背景是全寬無邊距和填充？

我的意圖是將懸停寬度設置爲文件資源管理器div的全部寬度，適用於任何數量的內部ul和li項目。我的意思是藍色懸停應該是全寬。請幫忙。ul李背景是全寬無邊距和填充？

enter image description here

以上UL李上市代碼：

<div id="files_list_explorer"> 
        <ul> 
         <li><img src='folder.png' height="14px" /><span> Android</span></li> 
         <li><img src='folder.png' height="14px" /><span> Android</span></li> 
          <ul> 
           <li><img src='folder.png' height="14px" /><span> Android</span></li> 
           <li><img src='folder.png' height="14px" /><span> Android</span></li> 
           <li><img src='folder.png' height="14px" /><span> Android</span></li> 
           <li><img src='folder.png' height="14px" /><span> Android</span></li> 
          </ul> 
         <li><img src='folder.png' height="14px" /><span> Android</span></li> 
         <li><img src='folder.png' height="14px" /><span> Android</span></li> 
        </ul> 
       </div>

和CSS（以下）：

div#files_list_explorer{ 
     background-color: white; 
     color:black; 
     ul{    
      padding-left: 15px; 
     } 
     ul li{ 
      height:30px; 
      line-height: 25px; 
      list-style-type: none; 
      cursor:pointer; 
      &:hover{ 
       background-color: #63B0C3; 
       color:white; 
      } 
      span{ 
       position:relative; 
       top:2px; 
       left:4px; 
      } 
     } 
    }

來源

2013-11-24 yourkishore

固定的錯字後，它工作正常，我。 Give it a shot here.

HTML是一樣的。以下是更正CSS：

div#files_list_explorer { 
    background-color: white; 
    color:black; 
} 
ul { 
    padding-left: 15px; 
} 
ul li { 
    height:30px; 
    line-height: 25px; 
    list-style-type: none; 
    cursor:pointer; 
} 
ul li:hover { 
    background-color: #63B0C3; 
    color:white; 
} 
span { 
    position:relative; 
    top:2px; 
    left:4px; 
}

來源

2013-11-24 04:20:23 Deryck

嘿夥計事情是在第二個嵌套的ul上懸停的背景欄應該是全長，這是我的興趣？找到了我？ – yourkishore

我向你展示的屏幕截圖是我從代碼中得到的，我需要的是將背景懸停到全寬skyblue欄 – yourkishore

從根本上說，你<ul>元素被填充到左邊有，並嵌套<ul>的獲得越來越多的填充。有了這個設置，我無法想象這是一種「單線解決方案」。

取而代之，我會將padding-left改爲存在於<li>元素本身上。這將解決一個問題（您會注意到您的頂級項目的懸停狀態將顯示爲全寬），但我們仍然有一個更改，並且這可能很重要。

更新：而不是將類名追加到您的列表元素，我更新了代碼，以簡單地使用派生子選擇器。這將允許您使用相同的標記，但會產生相同的影響。

Here's an example which solves the problem。

我也做了幾個簡單的更新。首先，你不應該在每張圖片上需要height: 14px，你可以用CSS來說明。其次，假設您在<li>中的字體大小也是14px，您可能會希望使用1em而不是14px，因爲它會將該圖標大小與容器的字體大小相關聯。更易於維護。

此外，承諾一種報價！你使用單引號和雙引號 - 堅持一個！我更喜歡雙引號，因爲這是XHTML的遺留問題。

最後，你應該把的空間放在之前，而不是在裏面。它使語法更有意義。

哦，如果您使用HTML5，則不需要自閉標籤。 HTML5已經知道<image>標籤應該如何工作。

來源

2013-11-24 04:24:07

這真的是我需要的，但事情是我會動態地爲此ul添加新的列表元素它不會工作，因爲我們不會添加多少李和內部李。 – yourkishore

我已經爲你更新了這個例子。我實際上在今天早上起牀時想到了這個，期待着給你更新;） –

這仍然只適用於最多3個嵌套元素。它可以用僞選擇器來擴展。 – Druska

您可以使用僞元素：在之前對您的LI元素實現所需效果。將僞元素設置爲根元素內的絕對位置，並將z索引設置爲一個值，該值將使元素位於元素的下方。

li { 
    height: 1.2em; 
    line-height: 1.2em; 
} 

li:before { 
    content: ""; 
    height: 1.2em; 
    left:0; 
    position: absolute; 
    right: 0; 
    z-index: -1; 
} 

.li:hover:before { 
    background-color: yellow; 
}

另請參閱https://jsfiddle.net/Daniel_Evers/wc2owtej/，其中包含在一個簡單的Tree-List-View示例中的效果。

來源

2016-08-26 07:56:43 Daniel

ul李背景是全寬無邊距和填充？

回答

相關問題