Проблема с минимальной шириной CSS и максимальной шириной

Ответ 1

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

Ответ 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>

Ответ 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>

Ответ 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;
}

Ответ 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>

Ответ 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>

Ответ 7

для вашей информации max-width по умолчанию не установлено, если основной 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>

Ответ 8

Вы должны установить ширину в auto:

width: auto;