如何让列表项宽度取列表宽度与自身内容宽度的较大值？

要实现列表项宽度取自身内容宽度与列表容器宽度的较大值，只需调整列表项的宽度属性，配合容器的滚动设置即可：

1. 给列表项（li）设置 width: max-content; min-width: 100%;
2. 保持列表容器（ul）的 overflow-x: auto（或 scroll），用于内容超出时显示横向滚动条

原理说明 #

• width: max-content：让列表项宽度完全适配自身内容长度，确保长内容不会被截断或换行
• min-width: 100%：强制列表项宽度至少等于容器宽度，保证短内容的列表项能占满整个容器
• overflow-x: auto：当列表项宽度超过容器时，自动生成横向滚动条，方便浏览全部内容

完整代码示例 #

CSS 代码

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

ul {
  width: 400px;
  overflow-x: auto; /* 内容超出时显示滚动条 */
  outline: 1px dashed red;
}

li {
  width: max-content; /* 宽度适配内容 */
  min-width: 100%; /* 最小宽度为容器宽度 */
  padding: 0.5rem 1rem;
  white-space: nowrap; /* 禁止内容换行，确保max-content生效 */
  background-color: skyblue;
  outline: 1px dashed blue;
}

HTML 代码

<ul>
  <li>test</li>
  <li>test test test test test test test test test test test test test test test test test test test test</li>
</ul>

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