CSS问题：实现li宽度随label文本自适应及自动换行

问题1：让li宽度随内部label文本自动增减 #

核心是让li不设置固定宽度，完全由内部内容决定宽度，同时保证label文本单行显示，避免折行导致li宽度异常。

问题2：li排列到页面边缘时自动换行 #

通过flex布局的flex-wrap: wrap属性实现自动换行，当一行无法容纳所有li时，剩余元素会自动移至下一行。

完整代码示例 #

HTML结构

<ul class="tag-list">
  <li><label>Black</label></li>
  <li><label>White</label></li>
  <li><label>Red</label></li>
  <li><label>Purple</label></li>
  <li><label>Forest Green</label></li>
  <li><label>Blue</label></li>
  <li><label>Yellow</label></li>
</ul>

CSS样式

.tag-list {
  list-style: none;
  padding: 0;
  margin: 0;
  /* 启用flex布局并开启自动换行 */
  display: flex;
  flex-wrap: wrap;
  /* 可选：设置li之间的间距 */
  gap: 10px;
}

.tag-list li {
  /* 让li宽度由内容决定，不拉伸、不收缩 */
  flex: 0 0 auto;
  /* 可选：添加基础视觉样式 */
  background-color: #e5e7eb;
  padding: 6px 12px;
  border-radius: 4px;
}

.tag-list label {
  /* 强制文本单行显示，确保li宽度匹配文本长度 */
  white-space: nowrap;
}

关键属性说明 #

• flex-wrap: wrap：作用在ul容器上，当子元素总宽度超过容器宽度时，自动触发换行。
• flex: 0 0 auto：作用在li上，0表示不拉伸、不收缩，auto表示宽度由内部内容决定。
• white-space: nowrap：作用在label上，防止文本折行，保证li宽度准确匹配单行文本的实际长度。

按照上述设置，Black对应的li会因文本短而宽度更小，Forest Green对应的li会因文本长而宽度更宽；当第一行元素（如到Purple）占满容器宽度时，剩余元素会自动换行显示。

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