如何让这些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>