¿Cómo hacer que un elemento de bloque se ajuste al tamaño de lo que está dentro de él?

Question

Si tengo este código HTML:

<li class="name">hi</li> 
<li class="name">hello</li> 
<li class="name">wheeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee!</li> 

Y este CSS:

li.name{ 
    border: 1px solid #A38870; 
    background-color: #FA682D; 
    list-style: none; 
    margin: 15px; 
    padding: 5px; 
} 

El fondo se extiende a todo lo ancho de la página como this.

¿Cómo puedo hacer que el fondo se ajuste al tamaño del texto como this (sin establecer explícitamente el ancho para cada elemento de la lista)?

Answer 1

display: table; 

añadir el código CSS en li.name clase CSS.

Answer 2

Darle display: inline-block

li.name{ 
    border: 1px solid #A38870; 
    background-color: #FA682D; 
    list-style: none; 
    margin: 15px; 
    padding: 5px; 

    display: inline-block; 

} 

Answer 3

Corregido, violín trabajar aquí: http://jsfiddle.net/ezmilhouse/3jRx7/1/

li.name{ 
    border: 1px solid #A38870; 
    background-color: #FA682D; 
    display:inline; 
    list-style: none; 
    line-height:36px; 
    padding:4px; 
} 

li.name:after { 
    content:"\A"; 
    white-space:pre; 
} 

Answer 4

li.name{ 
    /* your suff */ 
    float: left; 
    clear: both; 
} 

Esto por lo que cuando se flota elementos de bloque que se adaptan al contenido del tamaño, el problema es que flotan a la izquierda, por lo que va a ser uno junto al otro, para evitar esto se puede clear: left o clear: both.

Answer 5

intente utilizar clear:both; float: left propiedades.

Answer 6

Existen varias soluciones, ninguna realmente perfecta; cuál de ellos depende de su caso de uso.

1. Usar display: table. Esto funcionará en navegadores lo suficientemente nuevos pero no en versiones anteriores de IE.

2. Utilice float: left; clear: both según lo sugerido arriba. Esto funcionará siempre y cuando no haya otros flotadores alrededor, y se romperá horriblemente de lo contrario.

3. Utilice CSS específico del navegador (por ejemplo, Gecko admite width: -moz-fit-content). Esto tiene los inconvenientes obvios.

para su caso y en la actualidad, display: table probablemente funciona mejor, pero en el futuro podemos esperar que el valor de fit-contentwidth se estandarizada.