6

我希望每个文本中的每个文本都<li>具有与<ul>. 但不知何故，它不起作用，文本只是继续前进......我在这里的某个地方读到，给出<ul>宽度可以解决问题，但在我的情况下它不起作用。这是我的 HTML：

<div id="chat-wrapper" style="display:none;">
<div id="main-content">
    <div id="user-list-wrapper">
        <b>USERS</b>

        <ul id="user-list">
        </ul>

    </div>

        <div id="messages-main">
            <ul id="messages"></ul>
        </div>
<input id="message-input" placeholder="Your message here!" autofocus="autofocus"/>
<input type="button" id="datasend" value="send"/>
 </div>

这是我的 CSS：

#user-list-wrapper {
    float:left;
    width:100px;
    border-right:1px solid black;
    height:300px;
    overflow:scroll-y;
}

#login-wrapper {
    margin-left:auto;
    margin-right:auto;
    width:50%;
}

#messages-main {
    height:320px; 
    width:950px; 
    overflow:none;
    float:left;
    margin-left:20px;
}
#message-input {
    width:500px; 
    outline:none; 
    height:100px;
    margin-left:300px;
    line-height:100px;
}
#datasend{
}
#main-content {
    width:100%;
    height: 350px;
}
#messages {
    list-style-type:none;
    margin:0;
    width:900px;
}
#messages li {
    width:100%;
    padding:3px;
    border-bottom:1px solid #CCC;
}
#user-list {
    padding:0;
}
#user-list li{
    padding:3px;
    list-style:none;
    border-bottom:1px solid #CCC;
}

但这对我不起作用。在我的情况下，我必须做什么才能实现我想要的？谢谢。

更新：我添加了我拥有的确切代码。

更新2：文字也超过了#main-content。所以它不仅是<ul>

4

4 回答 4

9

如果您使用的是 css3，您可以尝试添加

word-wrap: break-word;

到 li css

于 2012-08-14T20:43:44.333 回答
3

You need to put 100% for li element. Here's an example, http://jsfiddle.net/HQPGS/

于 2012-08-14T20:43:34.317 回答
0

您可以为 li 放置“宽度：继承”并为 ul 设置宽度

于 2012-08-14T20:59:32.447 回答
0

您必须向 li 添加 3 个 css 属性才能实现：

li {
    overflow:hidden; 
    white-space:no-wrap; 
    text-overflow:ellipsis;
}

但是列表样式类型会随着选项“溢出：隐藏”而消失，我不知道如何让它出现。

于 2014-05-23T07:15:26.173 回答