CSS min-width和max-width的问题 [英] Issue with CSS min-width and max-width

问题描述

我有一个无序列表，例如示例演示

I have an unordered list like in the 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 即使其内容不适合单行吗？

I want the li items to be at least 120px wide and at most 250px. If I don't set the width, they automatically set it to max-width. But if I set it to 150px like in the demo, then why doesn't the second one get its maximum allowed width, i.e. 250px even if its content doesn't fit into a single line?

有没有我缺少的东西？这可以用纯CSS吗？

Is there something I am missing? Can this be done with pure CSS?

推荐答案

div默认为其父宽度的100％。所以它需要 max-width 。

A div takes by default 100% of its parent's width. So it will take the max-width.

要完成你想要的，浮动和清除两边：

To accomplish what you want, float them and clear both sides:

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>

这篇关于CSS min-width和max-width的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！