拉伸樹形視圖項寬度父容器，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>