style - link html

HTML UL ancho

Question

Dado el siguiente marcado:

<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
</ul>

Tanto el ancho de la ul como la del li parecen ser del 100%. Si aplico un background-color al elemento de la lista, el resaltado se extiende a todo el ancho de la página.

Solo quiero que el fondo resaltado se extienda tan ancho como el elemento más ancho (con algo de relleno). ¿Cómo restrinjo el ancho del li (o quizás del ul ) al ancho del artículo más ancho?

Answer 1

¿Puedes hacerlo así?

<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>

Answer 2

Exactamente como BoltBait dijo, envuelve tu texto en un elemento en línea, como span y dale esa clase.

<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>

Mi extra de 2 centavos es que si no tienes acceso para cambiar el HTML, puedes hacerlo usando Javascript. En jQuery:

$(''li.highlight'').wrapInner("<span></span>");

y usa el CSS:

li.highlight span { background-color: #f0f; }

editar: después de volver a leer su pregunta, ¿puede aclararlo? ¿Desea que el resaltado solo sea tan ancho como el elemento resaltado, o tan ancho como el elemento más ancho de la lista? p.ej:

- short - items ******************** - here - and then a really long one

... donde los asteriscos representan el resaltado. Si es así, entonces la respuesta de Buti-oxa es la más fácil. solo ten cuidado con despejar tus carrozas.

Answer 3

Añadiendo ul {float: left; } ul {float: left; } estilo forzará su lista en el ancho preferido, que es lo que desea.

El problema es que debes asegurarte de que el siguiente elemento esté debajo de la lista, como lo hacía antes. Clearing debe encargarse de eso.

Answer 4

Añadiendo style="float: left;" ul hará que el ul solo se estire tan ancho como el elemento más ancho. Sin embargo, el siguiente elemento se colocará a la derecha de la misma. Añadiendo style="clear: left;" al siguiente elemento colocará el siguiente elemento después de la ul .

Pruébalo

Consulte la documentación sobre float y clear .

Answer 5

La mejor manera de resolver esto sin estropear el estilo de su diseño existente es envolviendo el ul y el li en un div con display: inline-block

 <div id=''dropdown_tab'' style=''display: inline-block''>dropdown
<ul id=''dropdown_menu'' style=''display: none''>
<li>optoin 1</li>
<li>optoin 2</li>
<li id=''option_3''>optoin 3
<ul id=''dropdown_menu2'' style=''display: none''>
<li>second 1</li>
<li>second 2</li>
<li>second 3</li>
</ul>
</li>
</ul>
</div>