Szerokość <li> zależna od tekstu

Question

Witam. Jak zrobić, aby szerokość <li> w <ul> była zależna od tego, jak długi tekst znajduje się w <li> ? Obecnie szerokość ustawia się aż do końca strony.

Comments

Wrzuć kod ..proszę

---

<ul id="messagesList">
                    @if (ViewData["isGuid"].Equals(true))
                    {
                        foreach (var item in (ICollection<Auth.Models.Message>)ViewData["messagesList"])
                        {
                            <li>
                                <b>@item.User.UserName</b> <i>@item.DateTime</i>
                                <br /> <p>@item.Text</p>
                            </li>
                        }
                    }
                </ul>

a css:

#messagesList > li {
    list-style-type: none;
    background-color: #d6d6d6;
    border-radius: 15px;
    box-sizing: padding-box;
    padding: 0.5vh 0vw 0.2vh 1vw;
    word-break: break-all;
}

 

---

#messagesList > li {
    display: inline-block;
    list-style-type: none;
    background-color: #d6d6d6;
    border-radius: 15px;
    box-sizing: padding-box;
    padding: 0.5vh 0vw 0.2vh 1vw;
    word-break: break-all;
}

display:inline;

działa również!

Answer 1

Zmień

box-sizing: border-box;

zamiast

box-sizing: padding-box;

Comments

Nic to nie dało :/

---

a jakbyś się tak postarał i dodał cały kod tylko tak rzetelnie, estetycznie to może pokombinujemy...lepiej

---

No kurczę reszta to już backend :D. Można na sztywno tylko ustawić te <li>, np.

<div id="chat">
                <ul id="messagesList">
                            <li>
                                Cos tam
                            </li>
                </ul>
            </div>

 

---

display:inline-block;

display:inline;

Sprawdzałem i działa !

---

Tak, działa, tylko teraz elementy <li> ustawiają się obok siebie, zamiast kolejno pod sobą :/

---

#messagesList > li {
    float:left;
    clear:left;
    list-style-type: none;
    background-color: #d6d6d6;
    border-radius: 15px;
    box-sizing: padding-box;
    padding: 0.5vh 0vw 0.2vh 1vw;
    word-break: break-all;
}

albo ustaw sobie max-width: (ilość znaków jaką ma najdłuższy li + 1)

 

---

Działa, dzięki!