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



max-width media (6)

У меня есть неупорядоченный список, как в примере демо

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 ширину не менее 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

Вот обновленное решение 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 #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

Такое поведение возможно, если вы поместите содержимое <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 #5

Это потому, что вы установили width 150px . Если вы удалите атрибут width или auto значение 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 #6

для вашей информации 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>





css