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，即使其内容不适合单行？ / p>

我有什么遗失的吗？这可以用纯CSS完成吗？

Answer 1

默认情况下，div占用其父宽度的100％。所以需要max-width。

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果将<li>内容包装在<div>容器中，则可以实现所需的行为。然后，您可以将<div>容器inline-block与width: auto;一起制作，这样它们就不会符合相同的长度，因此您可以确定列表元素周围的边框根据其内容显示在下面的代码段中。

＆＃13;

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

＆＃13;

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

＆＃13;

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

如果主要max-width大于width，则默认设置为{{1>}，然后应用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;
}

Answer 8

您应将 width 设置为 auto ：

width: auto;

CSS min-width和max-width问题

8 个答案: