如何讓這些div在滾動div內展開爲全寬？

Question

我想在html/css中創建一個文件層次結構，但我無法獲取這些標籤或divs以擴展爲全寬度。它們只擴展到可見區域的寬度，但我想要它們的寬度。下面是fiddle來查看我在說什麼。灰色區域需要全部排列在右側。

a = 3;

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
div.hierarchy { 
 
    position: relative; 
 
    overflow: auto; 
 
    border-right: 1px solid grey; 
 
    width: 150px; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    height: 100%; 
 
} 
 

 
div.hierarchy label { 
 
    display: block; 
 
    min-width: 100%; 
 
    background: #eee; 
 
    white-space: nowrap; 
 
} 
 

 
div.directory { 
 
    padding-left: 20px; 
 
    width: 100%; 
 
} 
 
div.directory label { 
 
    border: 1px solid grey; 
 
    width: 100%; 
 
    cursor: pointer; 
 
}

<div class="hierarchy"> 
 
    <label>Hierarchy</label> 
 
    <div class="directory"> 
 
     <label>src</label> 
 
     <div class="directory"> 
 
      <div class="file"><label>test.txt</label></div> 
 
      <div class="file"><label>readme.txt</label></div> 
 
      <div class="file"><label>a really long filename.txt</label></div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

你需要改變你的div.directory CSS類，如下所示：

div.directory { 
    display:inline-block; 
    padding-left: 20px; 
} 

我進行了如下修改：

1）新增display:inline-block;

2）刪除了width:100%;規則。

下面是一個例子： http://jsfiddle.net/nnd7jyj1/

（作爲一個方面說明，這是一般不好的做法在CSS應用既width以及一個padding或margin規則相同元素的原因是，一些瀏覽器解釋width以包括padding/margin有的沒有，這會導致不一致的結果）

Answer 2

只需添加display:inline-block;到div.directory

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
div.hierarchy { 
 
    position: relative; 
 
    overflow: auto; 
 
    border-right: 1px solid grey; 
 
    width: 150px; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    height: 100%; 
 
} 
 
div.hierarchy label { 
 
    display: block; 
 
    min-width: 100%; 
 
    background: #eee; 
 
    white-space: nowrap; 
 
} 
 
div.directory { 
 
    padding-left: 20px; 
 
    /* width: 100%; */ 
 
    /* added */ 
 
    display: inline-block; 
 
} 
 
div.directory label { 
 
    border: 1px solid grey; 
 
    width: 100%; 
 
    cursor: pointer; 
 
}

<div class="hierarchy"> 
 
    <label>Hierarchy</label> 
 
    <div class="directory"> 
 
    <label>src</label> 
 
    <div class="directory"> 
 
     <div class="file"> 
 
     <label>test.txt</label> 
 
     </div> 
 
     <div class="file"> 
 
     <label>readme.txt</label> 
 
     </div> 
 
     <div class="file"> 
 
     <label>a really long filename.txt</label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>