ul與顯示塊沒有佔用父元素的整個空間

Question

我有一個<ul><li>樹，其中可以切換子級的可見性。 :hover應顯示元素的整個寬度。爲了說明問題，這些元素具有orange背景色。

現在你會看到最外面的<ul class="tree">不會佔用父母的整個空間。

.tree在現實生活中有一些原因，.tree位於可調整大小的區域內。這也是使用overflow-x: scroll;的原因和

padding-left: 2000px; 
margin-left: -2000px; 

再次獲取與背景顏色裝飾整個元素的原因。

此外，我需要使用white-space: nowrap;原因每個<li>應該只佔用一條線，並佔用足夠的空間寬度，因爲它需要。

.grid { 
 
    width: 200px; 
 
} 
 

 
.box { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow-x: scroll; 
 
    border: solid 1px fuchsia; 
 
} 
 

 
ul.tree { 
 
    display: block; 
 
    width: 100%; /* makes nothing */ 
 
    border: solid 1px lime; 
 
} 
 

 
ul.tree, 
 
ul.tree ul, 
 
ul.tree li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
ul.tree ul { 
 
    margin: 0 0 0 20px; 
 
} 
 

 
ul.tree a { 
 
    white-space: nowrap; 
 
    display: block; 
 
    padding: 5px; 
 
    padding-left: 2000px; 
 
    margin-left: -2000px; 
 
    margin-bottom: 5px; 
 
    color: #000; 
 
    background-color: orange; 
 
}

<div class="grid"> 
 
    <div> 
 
    <div class="box"> 
 
     <ul class="tree"> 
 
     <li> 
 
      <a href="#">xxx</a> 
 
      <ul> 
 
      <li> 
 
       <a href="#">xxx xxx</a> 
 
       <ul> 
 
       <li> 
 
        <a href="#">xxx xxx xxx</a> 
 
        <ul> 
 
        <li> 
 
         <a href="#">xxx xxx xxx</a> 
 
         <ul> 
 
         <li> 
 
          <a href="#">xxx xxx xxx xxx 123456 7890</a> 
 
         </li> 
 
         </ul> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

所以我需要的是橙色走一路的紫紅色邊框，而不是停止石灰邊界結束的地方。我怎樣才能做到這一點？

Answer 1

只需使用上ul.treeinline-block和min-width 100%（它會在IE瀏覽器一樣）

.grid { 
 
    width: 200px; 
 
} 
 

 
.box { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow-x: scroll; 
 
    border: solid 1px fuchsia; 
 
} 
 

 
ul.tree { 
 
    display: inline-block; 
 
    min-width: 100%; 
 
    border: solid 1px lime; 
 
} 
 

 
ul.tree, 
 
ul.tree ul, 
 
ul.tree li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
ul.tree ul { 
 
    margin: 0 0 0 20px; 
 
} 
 

 
ul.tree a { 
 
    white-space: nowrap; 
 
    display: block; 
 
    padding: 5px; 
 
    padding-left: 2000px; 
 
    margin-left: -2000px; 
 
    margin-bottom: 5px; 
 
    color: #000; 
 
    background-color: orange; 
 
}

<div class="grid"> 
 
    <div> 
 
    <div class="box"> 
 
     <ul class="tree"> 
 
     <li> 
 
      <a href="#">xxx</a> 
 
      <ul> 
 
      <li> 
 
       <a href="#">xxx xxx</a> 
 
       <ul> 
 
       <li> 
 
        <a href="#">xxx xxx xxx</a> 
 
        <ul> 
 
        <li> 
 
         <a href="#">xxx xxx xxx</a> 
 
         <ul> 
 
         <li> 
 
          <a href="#">xxx xxx xxx xxx 123456 7890</a> 
 
         </li> 
 
         </ul> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

你可以通過簡單地使樹解決這個問題，以適應內容寬度

.grid { 
 
    width: 200px; 
 
} 
 

 
.box { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow-x: scroll; 
 
    border: solid 1px fuchsia; 
 
} 
 

 
ul.tree { 
 
    display: block; 
 
    width: fit-content; 
 
    border: solid 1px lime; 
 
} 
 

 
ul.tree, 
 
ul.tree ul, 
 
ul.tree li { 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 

 
ul.tree ul { 
 
    margin: 0 0 0 20px; 
 
} 
 

 
ul.tree a { 
 
    white-space: nowrap; 
 
    display: block; 
 
    padding: 5px; 
 
    padding-left: 2000px; 
 
    margin-left: -2000px; 
 
    margin-bottom: 5px; 
 
    color: #000; 
 
    background-color: orange; 
 
}

<div class="grid"> 
 
    <div> 
 
    <div class="box"> 
 
     <ul class="tree"> 
 
     <li> 
 
      <a href="#">xxx</a> 
 
      <ul> 
 
      <li> 
 
       <a href="#">xxx xxx</a> 
 
       <ul> 
 
       <li> 
 
        <a href="#">xxx xxx xxx</a> 
 
        <ul> 
 
        <li> 
 
         <a href="#">xxx xxx xxx</a> 
 
         <ul> 
 
         <li> 
 
          <a href="#">xxx xxx xxx xxx 123456 7890</a> 
 
         </li> 
 
         </ul> 
 
        </li> 
 
        </ul> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>