Comment faire pour renvoyer le texte à li à être aussi longue que la largeur de l'ul?

Je veux que chaque texte dans chaque <li> avoir la même largeur que la largeur de la <ul>. Mais de toute façon ça ne fonctionne pas, le texte continue à aller et aller... j'ai lu quelque part ici que donner <ul> une largeur de résoudre le problème, mais il ne fonctionne pas dans mon cas. C'est mon code 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>

Et c'est mon 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;
}

Mais cela ne fonctionne pas pour moi. Que dois-je faire pour obtenir ce que je veux dans mon cas? Merci.

Mise à JOUR: j'ai ajouté le code exact que j'ai.

Mise à JOUR 2: Le texte dépasse également #main-content. Il n'est donc pas seulement le <ul>

Pas sûr que je comprends. Vous voulez que le li d'avoir la même chose avec ul.C'est déjà ce que vous avez. Ensuite, vous dites tex continue à aller et venir. Ce n'est pas ce que vous voulez => jsfiddle.net/xAA6H ?
Cela fonctionne parfaitement: http://jsfiddle.net/HPYpZ/1/show/. Qu'est ce que vous attendez qui n'est pas le cas?
Cela peut besoin de plus de précision sur ce qui est votre résultat et de ce que vous cherchez. Une chose que je peux dire, c'est que votre li largeur sera plus grande que votre ul largeur en raison de la marge.
retirer le rembourrage de la largeur. La nouvelle largeur pour li devrait être (900 - 3 - 3) = 894px (à gauche et à droite de remplissage)
Je suppose que pas de réponse est acceptée, alors 🙂

OriginalL'auteur Loolooii | 2012-08-14

css html

9

Si vous êtes en utilisant css3, vous pouvez essayer d'ajouter
```
word-wrap: break-word;
```
de la li css

OriginalL'auteur Brian
3

Vous avez besoin de mettre 100% pour l'élément li. Voici un exemple, http://jsfiddle.net/HQPGS/

d'une certaine manière cela ne fonctionne pas dans mon code.
Comme d'autres l'ont dit, la seule chose qui reste est le rembourrage.
Le <li> dépasse le <ul> plus de la marge. Il n'a pas d'importance combien de temps le texte est, il n'a pas à la ligne suivante 😉

OriginalL'auteur zen
0

Vous pouvez mettre "largeur: hériter" de li et de définir une largeur pour ul

OriginalL'auteur Rômulo Gomes
0

vous devez ajouter 3 propriétés css à li à faire:
```
li {
    overflow:hidden; 
    white-space:no-wrap; 
    text-overflow:ellipsis;
}
```
mais list-style-type disapprear avec l'option "overflow:hidden", et je n'ai aucune idée de comment l'obtenir apprear.

OriginalL'auteur AlexanderYao

Vous devez vous connecter pour publier un commentaire.