CSS/HTML树形视图：实现节点内容自适应且保留原有布局

我明白你遇到的问题了——把固定宽度的.node改成inline-block后，原本完美的布局直接乱套了。这是因为原来的布局依赖固定宽度来计算居中以及子元素排列，换成自适应宽度后需要调整容器的布局规则来适配。下面是具体的修改方案，能让节点宽度自适应同时完全保留你想要的组织图/列表视图布局：

关键修改点 #

• 让.node使用inline-block实现自适应宽度，移除固定width
• 调整.org-view > li的布局规则，确保父节点始终居中在子节点组的上方
• 隐藏复选框元素避免干扰布局，同时保留点击节点折叠的功能

修改后的完整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的每个子项成为独立的inline-block容器，内部居中 */
.org-view > li {
  display: inline-block;
  text-align: center;
  margin: 0 8px; /* 可选：调整子节点之间的水平间距 */
}

.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 { 
  position: absolute;
  left: -9999px; /* 隐藏复选框，不影响布局但保留功能 */
} 

.wbs input ~ ol { 
  display: none; 
} 

.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; 
  color: blue; 
  position: relative; 
  background-color: white; 
  border-radius: 3px; 
  border: 2px solid #4285F4; 
  display: inline-block; /* 启用自适应宽度 */
  /* width: 100px; 移除固定宽度 */
  padding: 4px; 
  vertical-align: top; 
  white-space: normal; /* 允许内容自动换行，若想强制不换行可改为nowrap */
}

为什么这样修改能解决问题？ #

• .org-view > li设置为inline-block：让每个父节点及其子节点组成为一个独立的“块”，这样水平排列的子节点组不会互相挤压，同时父节点的居中计算会基于自身内容宽度而非父容器的100%宽度。
• text-align: center：确保每个.org-view > li内部的父节点.node能居中显示，完美保留你想要的“父节点居中于首尾子节点之间”的效果。
• 隐藏复选框：原来的复选框是inline元素，会占用布局空间导致排列错位，把它移到视野外后，点击带for属性的.node依然能触发复选框的状态，折叠功能不受影响。
• .node的inline-block：让节点宽度完全由内部内容决定，同时vertical-align: top保证所有节点顶部对齐，避免内容高度不同时出现错位。

这样修改后，你的树形视图既能自适应节点内容宽度，又能完全保留原有的组织图水平排列、列表视图垂直排列的布局规则。

内容的提问来源于stack exchange，提问作者Greg Forel