Question

我有一个具有一定宽度的html列表，用于显示聊天消息。但是当聊天行对于列表来说是广泛的时候，它会被切断，并且不显示其余的聊天消息。

我希望剩下的字符显示在列表的下一行，但仍然在同一个li元素中，因为我对奇数和偶数列表项使用不同的样式。

我希望自己清楚明白，并感谢你的回应。

HTML：

<div id="top">
    <p id="welcome">Welcome to the lobby!</p>
    <nav>
        <ul id="chatList"></ul>
    </nav>
</div>

CSS：

#chatList {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding-left: 0px;
height: 800px;
background: rgb(140, 140, 140);
}

#chatList li {
margin-top: 0px;
height: 20px;
padding-left: 5px;
}

#chatList li:nth-child(odd) {
background: rgb(180, 180, 180); 
}

芝诺

Answer 1

您必须从height

中删除#chatlist li

#chatList li {
    margin-top: 0px;
    padding-left: 5px;
}

<强> Fiddle

列表的文本为宽时的多行列表项

1 个答案: