Pregunta Problema con CSS min-width y max-width


Tengo una lista desordenada como en el demostración de ejemplo

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>

Quiero el li artículos para ser al menos 120px de ancho y como máximo 250px. Si no configuro el ancho, lo configuran automáticamente en max-width. Pero si lo configuro para 150px como en la demostración, ¿por qué el segundo no obtiene su ancho máximo permitido, es decir 250px incluso si su contenido no cabe en una sola línea?

¿Hay algo que este olvidando? ¿Se puede hacer esto con CSS puro?


17
2017-09-15 11:08


origen


Respuestas:


Un div toma por defecto el 100% del ancho de sus padres. Entonces tomará el max-width.

Para lograr lo que desea, flote y borre ambos lados:

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>


18
2017-09-15 11:18



El comportamiento que desea es posible si envuelve su <li> contenido dentro de una <div> envase. A continuación, puede hacer que el <div> contenedores inline-block junto con width: auto; para que no se ajusten a longitudes idénticas y así consigas que los recuadros delimitados alrededor de tus elementos de lista estén determinados por su contenido como se muestra en el siguiente fragmento.

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>


5
2017-09-15 11:23



los display: table la propiedad se puede utilizar para lograr el efecto que desee. Si no establece ancho, el elemento se extiende a lo largo del contenido, de lo contrario la suma del ancho del margen, borde, relleno, ancho.

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
2017-09-15 12:35



Eso es porque estableces el width a 150px. Si elimina el atributo de ancho o da el auto valor para él, entonces funcionará como se esperaba. Por supuesto, todos los artículos obtendrán el ancho más largo de ellos: demostración actualizada

li {
    display: block;
    border: 1px solid lightCoral;
    list-style: none;
    padding: 4px 6px;
    margin: 5px;
    width: auto;
    min-width: 120px;
    max-width: 250px;
}

2
2017-09-15 11:14



Esto no es un problema, es el comportamiento normal de display: block elementos. Si necesita que el ancho sea el ancho del contenido, puede hacer una display:inline-blocky float:left; clear:both para evitar el problema de la pila

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>


2
2017-09-15 11:22



Aquí está la solución actualizada violín

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

Tu HTML

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

1
2017-09-15 11:38



para su información max-width  por defecto no está configurado si main width es más grande de max-width luego aplicar 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>


0
2017-09-15 11:16