html ul标签宽度,css - ul中每个li的不同宽度 - SO中文参考 - www.soinside.com

我正在尝试为li中的每个ul元素获得不同的宽度，但是一旦我添加了更大的元素，所有的li就会获得相同的宽度。我希望li的宽度与文本长度相同。

我的HTML：

Send

我的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;

}

});

我在做什么错？