我有一个极其嵌套的、分层的列表(它包含有关物种排序的生物数据)。请参阅示例，其中我仅选择了可能的 10 个嵌套级别中的三个。
我想水平显示此列表，作为旋转 90 度的组织结构图。
当我为每个子 ul 应用宽度时，我可以获得精确正确的布局。幸运的是，树是由 JavaScript 生成的，并且应用内联样式很容易。 (因此:)
<ul class="wrapper" style="width: 120px;">
但是，我真的很想摆脱这些内联样式，因为没有它们，树的整个管理会变得容易得多。 (考虑显示/隐藏子级别甚至删除完整组织级别的可能性)
正如您在 fiddle 中看到的那样，删除内联样式宽度是行不通的。这很奇怪，因为我设置了标签的宽度。 如何让父 div 适应子元素的宽度，无论它们嵌套的深度如何？
关于堆栈溢出，已经提出了几个类似的问题。这些建议设置float: left和position:relative。但是，太糟糕了，它不起作用......
http://jsfiddle.net/ideogram/27kNA/5/ (没有内联样式)
http://jsfiddle.net/ideogram/zFMyZ/2/ (使用内联样式)
基本上，我的问题归结为:在下面的 css/html 中，如何在保持所需布局的同时摆脱内联宽度？
<head>
<style type="text/css">
.label{
width: 120px;
text-align: center;
}
.wrapper{
display: inline-block;
vertical-align: middle;
padding-left: 0;
}
.label, .wrapper{
display: inline-block;
vertical-align: middle;
width: 110px;
}
.taxon{
display: inline-block;
overflow: hiden;
outline: 1px dotted #ddd;
margin: 5px 0;
text-align: left;
}
</style>
<ul class="wrapper" style="width: 360px;">
<li class="taxon ">
<div class="label">Balaenopteridae</div>
<ul class="wrapper" style="width: 240px;">
<li class="taxon ">
<div class="label">Balaenoptera</div>
<ul class="wrapper" style="width: 120px;">
<li class="taxon">
<div class="label">Balaenoptera acutorostrata</div>
</li>
<li class="taxon">
<div class="label">Balaenoptera borealis</div>
</li>
<li class="taxon">
<div class="label">Balaenoptera edeni</div>
</li>
</ul>
</li>
<li class="taxon">
<div class="label">Megaptera</div>
<ul class="wrapper" style="width: 120px;">
<li class="taxon">
<div class="label">Megaptera novaeangliae</div>
</li>
<li class="taxon">
<div class="label">Megaptera whatever</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
最佳答案
按如下方式更新您的选择器并删除任何定义的宽度。关键点是同族的 display: table-cell et al。
fiddle 样本: http://jsfiddle.net/pLUns/
.label{
border-radius: $taxon-margin;
text-align: center;
}
.wrapper{
vertical-align: middle;
}
.label, .wrapper{
display: table-cell;
vertical-align: middle;
}
.taxon{
display: table-row;
overflow: hidden;
outline: 1px dotted #ddd;
text-align: left;
border-spacing: 5px;
}
关于css - 具有多个嵌套级别的分层列表，水平布局 : have parent accommodate to childres width，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21877693/