Разная ширина для каждого li внутри ul

Question

Я пытаюсь получить различную ширину для каждого li элемента внутри ul, но как только я добавлю больший элемент, все li получат одинаковую ширину. Я хочу, чтобы li s имели ту же ширину, что и длина текста.

My HTML:

<div>
 <ul>

 </ul>
</div>
<textarea></textarea>
<button>Send</button>

My CSS:

div{
    overflow-y: scroll;
    overflow-x: hidden;
    height: 400px; 
    width:400px;
    border:1px solid black;
}
div ul {
    display: table;
    list-style: none;
}
div ul li{
    display: block;
    background-color: #b70505;
    color: white;
    font-weight: 600;
    font-size: 0.8em;
    border-radius: 25px;
    margin-top: 5px;
    padding: 10px;
    max-width:200px;
    word-wrap:break-word;
}

Мой JS:

var box = document.getElementsByTagName('div')[0];
var newText = document.getElementsByTagName('textarea')[0];
var button = document.getElementsByTagName('button')[0];

button.addEventListener('click', function(e){
    e.preventDefault();
    if(newText.value !== ''){
        var Newitem = document.createElement('li');
        Newitem.innerHTML = newText.value;
        box.getElementsByTagName('ul')[0].appendChild(Newitem);
        box.scrollTop = box.scrollHeight;
    }
});

https://jsfiddle.net/hdr60zmb/

Что я делаю не так?

Answer 1

Чтобы сделать ширину элементов списка зависимой от текста, удалите атрибуты display из ul и li и просто установите float: left в li элементы. Если вы хотите, чтобы каждый элемент списка находился в новой строке, добавьте clear: left.

CSS:

div ul {
    list-style: none;
}

div ul li {
    float: left;
    clear: left;
    background-color: #b70505;
    color: white;
    font-weight: 600;
    font-size: 0.8em;
    border-radius: 25px;
    margin-top: 5px;
    padding: 10px;
    max-width: 200px;
    word-wrap: break-word;
}

Демо: https://jsfiddle.net/rwkb03xc/

Помните о четком фиксировании ul, чтобы сохранить высоту этого элемента. Самое простое решение - добавить overflow: auto к ul. Подробнее об этом: Какие методы clearfix можно использовать?