如何让HTML中的li标签自适应宽度？

在 HTML 中，li 标签默认是根据其包含的内容来决定宽度的。如果希望 li 标签自适应宽度，可以使用 CSS 来设置相关样式。

有以下几种方法可以实现 li 标签自适应宽度：

使用 display: inline-block; 样式：将 li 标签的 display 属性设置为 inline-block，这样 li 标签会根据其内容自动调整宽度。示例代码如下：

<ul>
  <li style='display: inline-block;'>Item 1</li>
  <li style='display: inline-block;'>Item 2</li>
  <li style='display: inline-block;'>Item 3</li>
</ul>

使用 flex 布局：将 ul 标签的 display 属性设置为 flex，并将 li 标签的 flex 属性设置为 1，这样 li 标签将会平均分配空间，实现自适应宽度。示例代码如下：

<ul style='display: flex;'>
  <li style='flex: 1;'>Item 1</li>
  <li style='flex: 1;'>Item 2</li>
  <li style='flex: 1;'>Item 3</li>
</ul>

使用百分比宽度：将 li 标签的宽度设置为百分比值，如 width: 33.33%;，这样 li 标签将会根据父元素的宽度自适应调整宽度。示例代码如下：

<ul>
  <li style='width: 33.33%;'>Item 1</li>
  <li style='width: 33.33%;'>Item 2</li>
  <li style='width: 33.33%;'>Item 3</li>
</ul>

以上是几种常见的方法，根据具体需求选择适合的方式来实现 li 标签的自适应宽度。