我用 HTML 和 CSS 组合了一个 TreeView 控件，它可以将节点显示为组织结构图或经典 TreeView 列表。
在CodePen ，每个节点都有一组width: 100px。
How can I fit the content of the div (using
display: inline-blockfor example), but keep the layout of the chart as it is?
除了设置的宽度之外，您看到的树的布局完全符合我的要求。当我尝试用 display: inline-block 替换 width: 100px 时，布局完全改变了，无论我尝试什么，只会让情况变得更糟。
关于布局:
org-view:如果节点直接位于红色矩形框内，子节点应该 水平显示(例如:A，F，M和N水平显示 显示在根节点下)。父节点居中于其第一个和最后一个子节点的中间(Root Node居中于A和N的中间)list-view:如果节点直接位于绿色矩形框内，则其子节点将垂直显示在下方。
HTML:
<head>
<meta charset="UTF-8" />
<title>Hierarchy Chart</title>
</head>
<link rel="stylesheet" href="hierarchy-chart.css">
<body>
<div class="wbs">
<ol class="org-view">
<li>
<div class="node" for="node-1">1. Root node</div>
<input type="checkbox" checked id="node-1" />
<ol class="list-view">
<li>
<div class="node" for="node-1-1">AAAA</div>
<input type="checkbox" checked id="node-1-1" />
<ol class="list-view">
<li>
<div class="node">BBBB</div>
</li>
</ol>
<ol class="org-view">
<li>
<div class="node" for="node-1-1-2">CCCC</div>
<input type="checkbox" checked id="node-1-1-2" />
<ol class="list-view">
<li>
<div class="node">DDDD</div>
</li>
</ol>
<ol class="list-view">
<li>
<div class="node">EEEE</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>
<ol class="org-view">
<li>
<div class="node" for="node-1-2">FFFF</div>
<input type="checkbox" checked id="node-1-2" />
<ol class="list-view">
<li>
<div class="node" for="node-1-2-1">GGGG</div>
<input type="checkbox" checked id="node-1-2-1" />
<ol>
<li>
<div class="node">HHHH</div>
</li>
<li>
<div class="node">IIII</div>
</li>
</ol>
</li>
</ol>
<ol class="list-view">
<li>
<div class="node" for="node-1-2-2">JJJJ</div>
<input type="checkbox" checked id="node-1-2-2" />
<ol>
<li>
<div class="node">KKKK</div>
</li>
<li>
<div class="node">LLLL</div>
</li>
</ol>
</li>
</ol>
</li>
</ol>
<ol class="list-view">
<li>
<div class="node">MMMM</div>
</li>
</ol>
<ol class="list-view">
<li>
<div class="node">NNNN</div>
</li>
</ol>
</li>
</ol>
</div>
</body>
</html>
CSS
body {background-color: white;}
.wbs {
display: grid;
border: 4px solid #eee;
position: relative;
}
.wbs ol {
list-style-type: none;
padding-left: 10px;
}
.org-view {
border: 1px dashed red;
margin: auto;
}
.org-view >li > .node:first-child {
margin-left: auto;
margin-right: auto;
}
.list-view {
border: 1px dashed lightgreen;
vertical-align: top;
}
/* Tree view collapsible functionalities */
.wbs input {
//display: none;
}
.wbs input ~ ol {
display: none;
}
.org-view >li > .node:first-child {
margin-left: auto;
margin-right: auto;
}
.org-view > li > input:checked ~ ol {
display: inline-block;
}
.org-view .list-view input:checked ~ ol {
display: block;
}
.org-view .org-view input:checked ~ ol {
display: inline-block;
}
.node {
margin-top: 10px;
}
.node {
color: blue;
position: relative;
background-color: white;
border-radius: 3px;
border: 2px solid #4285F4;
//display: inline-block;
width: 100px;
padding: 4px;
vertical-align: top;
}
最佳答案
在我看来还不错。
如果您希望节点导致换行，您可以将它们包装在 <div> 中元素，所以他们会有一个 block 元素打破线条。
此外，您可能希望将它们居中。
这是您的 CodePen 的分支:https://codepen.io/anon/pen/jYdEro?editors=1100#
只有第一个节点。我实在太懒了，无法真正完成整个事情 - 但你会明白这一点的:)
一些解释:
为名为 node-wrapper 的每个节点元素添加了一个新的包装器元素. <div> 的默认显示元素是block这样就可以处理换行符。该元素的样式:
.node-wrapper {
text-align: center;
}
自 node元素是 inline-block ，我们可以使用 text-align 将其居中在父元素上。
关于html - 无法使内容适合 CSS 和 HTML TreeView 中的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48351565/