CSS min-width 和 max-width 的问题

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。

为了完成你想要的，浮动它们并清除两边：

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; 一起制作，以便它们不符合具有相同长度的要求，因此您可以在列表元素周围获得边框框，由它们的内容确定，如 sn 所示-p 下面。

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>

Answer 3

display: table属性可以用来达到你想要的效果。如果不设置宽度，则元素沿内容的长度延伸，否则为margin、border、padding、width的宽度之和。

li {
    display: table;
    border: 1px solid lightCoral;
    list-style: none;
    padding: 4px 6px;
    margin: 5px;
    width: auto;
    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 4

这是因为您将width 设置为150px。如果您删除 width 属性或为其赋予 auto 值，那么它将按预期工作。当然，所有的项目都会得到其中最长的宽度：updated demo

li {
    display: block;
    border: 1px solid lightCoral;
    list-style: none;
    padding: 4px 6px;
    margin: 5px;
    width: auto;
    min-width: 120px;
    max-width: 250px;
}

Answer 5

这不是问题，是display: block 元素的正常行为。如果您需要宽度为内容的宽度，您可以创建 display:inline-block 和 float:left; clear:both 以避免堆栈问题

li {
  display: inline-block;
  border: 1px solid lightCoral;
  list-style: none;
  padding: 4px 6px;
  margin: 5px;
  width: auto;
  min-width: 120px;
  max-width: 250px;
  clear:both;
  float:left;
}
    
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 6

这里是更新的解决方案fiddle

你的 CSS

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;
}

你的 HTML

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

Answer 7

如果主width 大于max-width，则默认未设置max-width 供您参考，然后应用max-width。

li {
  display: block;
  border: 1px solid lightCoral;
  list-style: none;
  padding: 4px 6px;
  margin: 5px;
  width: 300px;
  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 8

您应该将 width 设置为 auto：

width: auto;