CSS min-width和max-width问题

Question

我有一个无序列表,如示例演示中所示

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.

要完成你想要的东西,漂浮它们并清除两边:

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>

Answer 2

如果将<li>内容包装在<div>容器中,则可以实现所需的行为.然后,您可以制作<div>容器inline-block,width: auto;使它们不符合相同的长度,从而使得列表元素周围的边框由其内容确定,如下面的代码段所示.

li {
  list-style: none;
  margin: 5px;
}

li > div {
  display: inline-block;
  border: 1px solid lightCoral;
  width: auto;
  padding: 4px 6px;
  min-width: 120px;
  max-width: 250px;
}
    
li:last-child > div{
  width: 200px;
}

<ul>
  <li><div> first item </div></li>
  <li><div> second item very long content </div></li>
  <li><div> third item </div></li>
  <li><div> This is 200px wide</div></li>
</ul>