如何使ul内各li宽度适配文本长度？问题排查

嘿，我帮你定位到问题啦！你遇到的所有li宽度变得一致的问题，根源出在ul的display: table设置上。

当你给ul设置display: table时，它的子元素（也就是你的li）会继承表格布局的特性——表格会让所有“单元格”（这里相当于li）尽可能对齐宽度，哪怕有些li的内容很短。再加上li用了display: block，block元素默认会填充父容器的可用宽度，所以一旦有某个li因为内容过长触发了max-width:200px，其他所有li都会跟着变成这个宽度，自然就没法自适应文本长度了。

修复方案 #

我们只需要调整ul和li的布局属性，让li能够根据自身内容宽度自适应：

修改后的CSS代码 #

div{ 
  overflow-y: scroll; 
  overflow-x: hidden; 
  height: 400px; 
  width:400px; 
  border:1px solid black; 
  padding: 0 10px; /* 加个内边距，避免li贴到容器边缘 */
}

div ul { 
  list-style: none; 
  padding: 0; /* 清除ul默认的内边距，避免li缩进 */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 让li靠左对齐，宽度由内容决定 */
}

div ul li{ 
  display: block; 
  background-color: #b70505; 
  color: white; 
  font-weight: 600; 
  font-size: 0.8em; 
  border-radius: 25px; 
  margin-top: 5px; 
  padding: 10px; 
  max-width:200px; 
  word-wrap:break-word; 
  /* 可选：如果想让li文本居中，加text-align: center; */
}

为什么这样改？ #

• 用display: flex; flex-direction: column把ul变成垂直方向的弹性容器，这样每个li都是独立的弹性项。
• align-items: flex-start让弹性项（li）靠左对齐，并且宽度由自身内容决定，不会强制撑满容器。
• 保留max-width:200px，确保长文本会自动换行，不会超出设定的最大宽度。

完整测试代码 #

<div> 
  <ul> </ul> 
</div> 
<textarea></textarea> 
<button>Send</button>

<style>
div{ 
  overflow-y: scroll; 
  overflow-x: hidden; 
  height: 400px; 
  width:400px; 
  border:1px solid black; 
  padding: 0 10px;
}

div ul { 
  list-style: none; 
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

div ul li{ 
  display: block; 
  background-color: #b70505; 
  color: white; 
  font-weight: 600; 
  font-size: 0.8em; 
  border-radius: 25px; 
  margin-top: 5px; 
  padding: 10px; 
  max-width:200px; 
  word-wrap:break-word; 
}
</style>

<script>
var box = document.getElementsByTagName('div')[0]; 
var newText = document.getElementsByTagName('textarea')[0]; 
var button = document.getElementsByTagName('button')[0]; 

button.addEventListener('click', function(e){ 
  e.preventDefault(); 
  if(newText.value !== ''){ 
    var Newitem = document.createElement('li'); 
    Newitem.innerHTML = newText.value; 
    box.getElementsByTagName('ul')[0].appendChild(Newitem); 
    box.scrollTop = box.scrollHeight; 
    newText.value = ''; // 可选：清空输入框，提升交互体验
  } 
});
</script>

现在你再测试一下：短文本的li会自动适配内容宽度，长文本的li会在达到200px时换行，不会让所有li都变成一样的宽度啦！

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