如何仅用HTML和CSS实现元素宽度为子元素数量×10px？

要实现父元素宽度等于子元素数量乘以固定值（如10px），无需JavaScript的话，可以利用CSS布局特性让父元素自适应子元素的总宽度，具体方案如下：

实现思路 #

让每个子元素占据固定的10px宽度，再通过布局让父元素自动收缩到子元素的总宽度，间接达到“子元素数量×10px”的效果。

代码示例 #

CSS代码 #

svg {
  display: inline-flex; /* 使svg宽度自适应子元素总宽度 */
  border: 1px solid #000; /* 可选，方便查看svg边界 */
}

svg > g {
  width: 10px; /* 每个子元素固定10px宽度 */
  height: 20px; /* 可选，设置高度便于可视化 */
  background-color: #eee; /* 可选，给子元素添加背景色 */
}

HTML代码 #

<svg>
  <g></g>
  <g></g>
</svg>

效果说明 #

上述代码中，svg包含2个<g>子元素，每个子元素宽度为10px，通过inline-flex布局，svg的宽度会自动适配为2×10px=20px，完全符合需求。如果添加更多<g>子元素，svg宽度会自动按“子元素数量×10px”扩展。

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