html - ulの幅と同じ長さになるようにテキストをliで折り返すにはどうすればよいですか？

Question

それぞれのテキスト<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>

Answer 1

css3を使用している場合は、追加してみてください

word-wrap: break-word;

Li cssへ

Answer 2

li 要素には 100% を指定する必要があります。例を次に示します。http://jsfiddle.net/HQPGS/

Answer 3

liに「width：inherit」を設定し、ulに幅を設定できます