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>