Ajuste de la anchura de los elementos en línea

Question

Puede ajustar el ancho de los elementos en línea como <span>, y <em><strong>, pero no notará ningún efecto hasta que la posición de ellos.

a) ¿Pensé que no se puede establecer el ancho de un elemento alineado en línea?

b) Suponiendo que se puede establecer el ancho - no notaremos ningún efecto (por lo tanto, el ancho que especifiquemos) hasta que coloquemos el elemento en línea. Posición cómo/dónde?

c) ¿Por qué el ancho de los elementos en línea es aparente solo cuando los "posicionamos"?

Answer 1

Como otros han mencionado, el establecimiento de la anchura (o alguna otra propiedad relacionado con la posición) de un elemento en línea hará que el navegador a continuación, mostrar el elemento como un elemento de bloque.

Se puede declarar explícitamente este tipo de comportamiento a través del uso de CSS display propiedad. Los ajustes más comunes son display: inline (por defecto), display: block y display: none.
Una referencia completa de la propiedad display está disponible here.

Sin embargo, cabe señalar que el HTML 4.01 specification desalienta el uso de "anulando la interpretación convencional de elementos HTML":

Las hojas de estilo proporcionan los medios para especificar la prestación de arbitrarias elementos, incluyendo si un elemento se representa como bloque o en línea. En algunos casos, como un estilo en línea de elementos de la lista, esto puede ser adecuada, pero en términos generales, autores no se animan a anulando el interpretación convencional de los elementos HTML en esta manera.

Answer 2

a) La anchura de un elemento en línea es ignorado

b, c) Cuando "posición" un elemento en línea (supongo que significa usar posición: absoluta), en realidad se está por lo que es un bloque elemento, cuya anchura es interpretado por el navegador

Answer 3

Creo que es debido al hecho de que cuando se especifica los atributos de la posición de un elemento "en línea", el elemento ya no está siendo representada línea y en su lugar está siendo tratado como una elemento de nivel de bloque.

Answer 4

Eso significa básicamente que si se aplica a position: absolute elemento en línea, se convertirá en elemento de bloque y el ancho de ganancia.

Answer 5

También hay la opción de display: inline-block, que podría darle lo mejor de ambos mundos. Sin embargo, ten cuidado con la compatibilidad entre navegadores.

Answer 6

a. El ancho de los elementos en línea se ignora.

b.De hecho, puede aplicar ancho al elemento si establece display: inline-block;, pero para ver los resultados también debe aplicar overflow: hidden;.

tener todos los beneficios de la línea de bloques y tipos que se pueden utilizar fragmento de seguimiento:

display: inline-block; width: 50%; // or px, em, etc. overflow: hidden; text-overflow: ellipsis;

En este caso usted puede manejar el ancho y tienen función de puntos suspensivos texto.

Answer 7

El elemento en línea no puede tener ancho. El ancho es una propiedad del elemento de bloque. Por lo tanto, para usar la propiedad del ancho sobre un elemento en línea o un elemento con visualización, muestre el conjunto en línea como bloque en línea, por ejemplo: display: inline-block;