时间戳

首页 > 解决方案 > 当一项溢出时，如何将列表项拉伸到 100%？

html - 当一项溢出时，如何将列表项拉伸到 100%？

问题描述

我想拉伸列表项的宽度（或至少具有灰色背景的宽度），因此当容器滚动时，背景将一直显示到右端。

<html>

<body>
  <ul style="width: 100px; overflow:auto auto; border: 1px solid black">
    <li style="background-color: gray;">hello</li>
    <li>verylongitem!!!!!!!!!!</li>
  </ul>
</body>

</html>

标签： htmlcss

解决方案

您可以使用此代码。

当您的文本没有任何空格字符时，它应该知道发生此问题。

但你可以按照下面的代码

li {
    word-break: break-all;
}

或内联样式


<ul style="width: 100px; overflow:auto auto; border: 1px solid black">
    <li style="background-color: gray;">hello</li>
    <li style="word-break: break-all;">verylongitem!!!!!!!!!!</li>
  </ul>

您也可以在li文本内容之间设置一个空格，例如此文本verylongitem!!!!!!!!!!转换为verylongitem!! !!!!!!!!

推荐阅读