html - CSS 最小宽度和最大宽度问题

Question

我有一个无序列表，如 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 项的宽度至少为 120px，最多为 250px。如果我不设置宽度，他们会自动将其设置为 max-width。但是，如果我像在演示中那样将它设置为 150px，那么为什么第二个没有获得其最大允许宽度，即 250px，即使它的内容不适合成一行？

有什么我想念的吗？这可以用纯 CSS 完成吗？

Answer 1

默认情况下，div 占据其父级宽度的 100%。所以它将采用 max-width。

为了完成你想要的， float 它们并清除两边:

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>