个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有一个极其嵌套的、分层的列表(它包含关于物种排序的生物学数据)。请参阅示例，其中我只选择了可能的 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/
24
4
0
我有一个极其嵌套的、分层的列表(它包含关于物种排序的生物学数据)。请参阅示例，其中我只选择了可能的 10 层嵌套中的三层。 我想水平显示此列表，作为已旋转 90 度的组织结构图。 当我为每个子 ul
背景: 我有一个我上传的文件，在此过程中，文件的链接存储在数据库中而不是实际文件中，实际文件存储在文件系统中，目前存储在我的本地机器中。 目标: 我的目标是上传文件并正确下载文件，其中包含特殊字符 -
代码: cidrsubnet("10.1.2.0/21", 3, 8) 问题: 当我在 terraform 中运行此命令时，我得到的前缀扩展名不是 3容纳一个编号为8的子网。这是为什么呢？任何低于 8
代码: cidrsubnet("10.1.2.0/21", 3, 8) 问题: 当我在 terraform 中运行此命令时，我得到的前缀扩展名不是 3容纳一个编号为8的子网。这是为什么呢？任何低于 8
我在 Seaborn 中有一个包含 10 个图的 FacetGrid 图表，其中的图略有重叠。我想改变整体图形的大小。当我在下面的代码中使用 g.fig.subplots(figsize=(12,12
我是一名优秀的程序员,十分优秀！