Poner elementos en linea css
Display: block css
I have some text that is interrupted by a tag change. Obviously, the second part of the text begins in a new line. How can I put it in one line? I tried to add display: inline to the <p>. But this has the effect that the position of ‘Name.’ changed.
<p class=»_10_Lesetext_02_Txt_lb»><span class=»semibold-semicondensed _idGenCharOverride-1″>Name.</span> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text be</p>
<p class=»_10_Lesetext_02_Txt_lb»><span class=»semibold-semicondensed _idGenCharOverride-1″>Name.</span> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text be</p>
<p class=»_10_Lesetext_02_Txt_lb»><span class=»semibold-semicondensed _idGenCharOverride-1″>Name.</span> Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text be</p>
Visualización: inline-flex
Formalmente, la propiedad display establece los tipos de visualización interior y exterior de un elemento. El tipo externo establece la participación de un elemento en el diseño del flujo; el tipo interno establece el diseño de los hijos. Algunos valores de display están completamente definidos en sus propias especificaciones individuales; por ejemplo, el detalle de lo que ocurre cuando se declara display: flex está definido en la especificación del Modelo de Caja Flexible de CSS. Consulte la tabla al final de este documento para ver todas las especificaciones individuales.
Nota: Los navegadores que soportan la sintaxis de dos valores, al encontrar el valor exterior solamente, como cuando se especifica display: block o display: inline, establecerán el valor interior a flow. Esto dará como resultado el comportamiento esperado; por ejemplo, si se especifica que un elemento sea block, se esperará que los hijos de ese elemento participen en la disposición de flujo normal block e inline.
Dependiendo del valor de otras propiedades (como position, float o overflow) y de si él mismo está participando en un contexto de formato de bloque o inline, establece un nuevo contexto de formato de bloque (BFC) para su contenido o integra su contenido en su contexto de formato padre.
Css blocksatz
Necesito que element2 se alinee junto a element1 con unos 10 píxeles de relleno entre ambos. El problema es que el ancho del elemento2 puede cambiar dependiendo del contenido y del navegador (tamaño de la fuente, etc.) por lo que no siempre está alineado perfectamente con el elemento1 (no puedo simplemente aplicar un margin-right y moverlo).
Usando display: inline-block; Y más generalmente cuando tienes un padre (siempre hay un padre excepto para html) usa display: inline-block; para los elementos internos. y para forzarlos a permanecer en la misma línea incluso cuando la ventana se encoge (se contrae). Añade para el padre la propiedad dos:
Para este ejemplo en particular, se puede aplicar lo anterior como compañero (estoy suponiendo que el padre es el cuerpo. si no se pone el padre correcto), también se puede como cambiar el html y añadir un padre para ellos si es posible.
ten en cuenta que white-space: nowrap; y overlow-x: auto; es lo que necesitas para forzar que estén en una sola línea. white-space: nowrap; desactiva el wrapping. Y overlow-x:auto; para activar el desplazamiento, cuando el elemento sobrepasa el límite del marco.
Inline vs inline-block
En el ejemplo anterior, el ancho de los elementos padre e hijo se establece en porcentaje (para hacerlo fluido), esto puede cambiarse fácilmente a cualquier otra unidad de medida. Por ejemplo, puedes usar píxeles (px) para elementos de ancho fijo con desplazamiento horizontal.
Ahora, en el elemento padre puedes definir el ancho en función del número de elementos hijos que quieras mantener en la misma línea. Por ejemplo, si quieres mostrar dos cajas en el área de visualización entre un total de tres cajas, harías algo como lo siguiente:
En el ejemplo anterior, 150px es la mitad de 300px, lo que le permitirá acomodar dos cajas en el área de visualización. De esta manera, puede establecer que el ancho del elemento padre sea igual al ancho de todos los elementos hijos combinados. Esto ayuda a asegurar que todos los elementos flotados permanezcan en la misma línea.