我有一个无序的列表，如
example demo
li {
display: block;
border: 1px solid lightCoral;
list-style: none;
padding: 4px 6px;
margin: 5px;
width: 150px;
min-width: 120px;
max-width: 250px;
}
li:last-child{
width: 200px;
}
<ul> <li> first item </li> <li> second item very long content </li> <li> third item </li> <li> This is 200px wide</li> </ul>
我想要的li项目至少为120像素宽，最多为250像素。如果我没有设置宽度，它们会自动将其设置为max-width。但是如果我把它设置为150px像演示，那么为什么第二个获得最大允许的宽度，即250像素，即使它的内容不适合单行？
有没有我失踪的东西？这可以用纯CSS完成吗？
解决方法
默认情况下，div的父宽度为100％。所以它将采取最大宽度。
要完成你想要的，漂浮并清除双方：
li {
display: block;
float: left;
clear: both;
border: 1px solid lightCoral;
list-style: none;
padding: 4px 6px;
margin: 5px;
min-width: 120px;
max-width: 250px;
}
li:last-child {
width: 200px;
}
<ul> <li>first item</li> <li>second item very long content</li> <li>third item</li> <li>This is 200px wide</li> </ul>
