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> 

Answer 3

display: table属性可用于实现您想要的效果。 如果未设置宽度，则元素沿内容的长度延伸，否则为边距，边框，填充，宽度的总和。

 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值，则它将按预期工作。 当然，所有项目都将获得最长的项目： 更新的演示

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

这是更新的解决方案小提琴

你的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

您应该将宽度设置为auto ：

width: auto;