html – CSS最小宽度和最大宽度的问题

发布时间：2020-12-14 21:37:12 所属栏目：资源来源：网络整理

导读：我有一个无序的列表，如 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 l

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

有没有我失踪的东西？这可以用纯CSS完成吗？

解决方法

默认情况下，div的父宽度为100％。所以它将采取最大宽度。

要完成你想要的，漂浮并清除双方：

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!