拉伸树形视图项宽度父容器，CSS/HTML

Question

我上树视图组件工作左侧菜单（见截图）：

在树视图中的所有项目必须是可选择的。我设置宽度为项100％，并且当我在高亮区域的树宽度选择项小于左侧板：

但宽度高亮区域的为等于左侧面板的宽度。我知道，它可以与margin和padding操作的高亮区域例如可以实现：

{ 
margin: 0 -400px; 
padding: 0 400px; 
} 

但它会导致水平滚动条：

就在那儿强调任何“聪明”的方式区域延伸到容器（左侧面板）？

Answer 1

当width: 100%和/或max-width: 100%时，每个孩子都应该适合其父母。

为了得到结果，你希望每个项目需要规则：

• white-space: nowrap（所以它不会换行到下一行）
• overflow: hidden（砍掉多余的文字）
• width: 100%（以拉伸到父）

见下段为两个例子：与UL/LI和DIV的

html, 
 
body { 
 
    /*UPDATE*/ 
 
    box-sizing: border-box; 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: hidden 
 
} 
 
*, 
 
*:before, 
 
*:after { 
 
    box-sizing: inherit 
 
} 
 
/* { outline: 1px dotted red } /* for debug */ 
 

 
ul, 
 
li { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.side-panel { 
 
    max-width: 200px; 
 
    padding: 4px; 
 
    border: 1px solid rgba(0, 0, 0, .2) 
 
} 
 
ul, 
 
.treeview { 
 
    max-width: 100%; 
 
    text-align: right; 
 
} 
 
li, 
 
.item { 
 
    height: 23px; /*ADD*/ 
 
    width: 100%; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    margin: 5px 0; /*ADD*/ 
 
} 
 
li:hover, 
 
.item:hover { /*ADD*/ 
 
    height: 23px; 
 
    text-align: left; 
 
    border: 1px dashed cornflowerblue; 
 
    cursor: pointer 
 
} 
 
li:nth-child(even), 
 
.item:nth-child(odd) { 
 
    background: rgba(0, 255, 0, 0.1) 
 
} 
 
li:nth-child(odd), 
 
.item:nth-child(even) { 
 
    background: rgba(0, 0, 255, 0.1) 
 
}

<div class="side-panel"> 
 
    <h3>example with UL/LI</h3> 
 
    <ul> 
 
    <li>some item 1</li> 
 
    <li>some item 2</li> 
 
    <li>some item 3</li> 
 
    <li>some item 4fgdfg g</li> 
 
    <li>some item 5 sad d fd</li> 
 
    <li>some item 6 sdtresertg zdf dfsfd</li> 
 
    <li>some item 7</li> 
 
    </ul> 
 
</div> 
 
<div class="side-panel"> 
 
    <h3>example with DIV's</h3> 
 
    <div class="treeview"> 
 
    <div class="item">some item 1</div> 
 
    <div class="item">some item 2</div> 
 
    <div class="item">some item 3</div> 
 
    <div class="item">some item 4fgdfg g</div> 
 
    <div class="item">some item 5 sad d fd</div> 
 
    <div class="item">some item 6 sdtresertg zdf dfsfd</div> 
 
    <div class="item">some item 7</div> 
 
    </div> 
 
</div>