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;