¿Cuándo usas el bloque en línea?

 

 

 


Índice
  1. Botones
  2. No lo olvides inline-flexyinline-grid
  • Bloques que aún pueden envolver
    1. transformen un elemento en línea
    2. Niños de columna que no se rompen por la mitad.
    3. Manera rápida de hacer que una lista quede horizontal
    4. Listas centradas
  • ¡ El inline-blockvalor displayes un clásico! No es nuevo y la compatibilidad con el navegador ciertamente no es algo de lo que deba preocuparse. Estoy seguro de que muchos de nosotros lo alcanzamos de forma intuitiva. Pero pongámosle punto. ¿Para qué sirve realmente? ¿Cuándo lo eliges entre otras opciones, quizás similares?

     

    (Apuesto a que esto genera respuestas interesantes).

    ¿Para qué fue lo último que usaste `display: inline-block`?

    – Chris Coyier (@chriscoyier) 19 de junio de 2020

    Botones

    La respuesta más común que escuché fue: siempre lo uso en botones.

    En última instancia, creo que eso tiene sentido, pero contribuye a lo que considero un ligero malentendido. La idea es que desea que los elementos que parecen botones (que podrían estar diseñados con a, buttono quizás input) se coloquen en línea, como lo hacen de forma natural, pero que puedan tener margen y relleno. Esa es la parte del pequeño malentendido: display: inline;los elementos aún pueden tener margin y paddingy probablemente se comporte como usted espera.

     

    La parte complicada es que:

    • El margen de dirección del bloque en elementos en línea se ignora por completo
    • El relleno de los elementos en línea no afecta la altura de la línea de texto.

    Entonces, si bien los botones en sí tienen un estilo bastante bueno, el elemento principal y el texto circundante probablemente no lo sean. Aquí hay una demostración que:

    Las cosas empeoran cuando el ajuste comienza a ocurrir con botones en línea:

    Entonces sí, inline-blockdiría que tiene bastante sentido en los botones. Pero…

    No lo olvides inline-flexyinline-grid

    Con los displayvalores inline-flexy inline-grid, obtendrá el mismo buen comportamiento que con inline-block, pero los elementos (a menudo botones) pueden beneficiarse de un sistema de diseño en línea más sólido.

    Tomemos el ejemplo de botones con iconos, como este:

    a href="#"token tag"svg ... /svg Text/a

    Para alinear perfectamente el texto y el ícono en el centro, es tentador hacer lo siguiente:

    .button svg { vertical-align: middle;}

    Lo cual nunca lo hace del todo bien…

    Pero esta es una solución fácil con inline-flex:

    .button { display: inline-flex; align-items: center;}

    Con inline-flexo inline-grid, tienes todo el poder de un flexbox o un sistema de diseño de cuadrícula dentro de un bloque que se dispone en dirección en línea.

    Bloques que aún pueden envolver

    Un inline-blockelementos respetará a width. Esa es otra diferencia entre ellos y los elementos simples inline. La gente solía ¹ construir sistemas de diseño de columnas con inline-block, porque básicamente puede hacer lo que los flotadores podrían hacer aquí, excepto sin la necesidad de preocuparse por limpiar el flotador ² , lo que permite a las personas aprovechar la envoltura, que ocurre de manera un poco más elegante que el flotador.

    La idea de que los bloques en línea se comporten como columnas que pueden ajustarse (incluso hasta 1 columna) sigue vigente hasta el día de hoy porque es un truco que se puede usar en correos electrónicos HTML para permitir diseños de varias columnas que se contraen en una sola columna en pequeñas columnas. pantallas sin necesidad de consultas de medios (que algunos clientes de correo electrónico no admiten). HERRETE | Descúbre su verdadero significado

    Ayer en un correo electrónico HTML, en divs que envuelven tablas, para permitir columnas responsivas sin consultas de medios

    – Dan Denney (@dandenney) 19 de junio de 2020

    El ejemplo de Dan .

    transformen un elemento en línea

    Los elementos en línea no pueden aceptar un archivo transform. Entonces, si necesitas eso, tendrá que ser así inline-block.

    Niños de columna que no se rompen por la mitad.

    Las columnas CSS se pueden usar en párrafos de texto en los que realmente no le importa si un párrafo determinado se divide entre columnas. Pero a veces las columnas CSS se usan para bloques donde eso sería incómodo. Digamos que los bloques tienen sus propios fondos y relleno. Los descansos son bastante extraños visualmente.

     

    Este es un truco extraño que no puedo decir que entiendo al 100%, pero si colocas display: inline-block;esas cajas (y probablemente width: 100%;para asegurarte de que mantengan el ancho de la columna), no se romperán y el relleno se conserva.

    Manera rápida de hacer que una lista quede horizontal

    Esta fue otra respuesta muy popular a mi tweet original. Los elementos de lista apilan elementos de lista verticalmente, como elementos a nivel de bloque. En realidad, no son bloques. Lo son display: list-item;, lo cual en realidad es algo importante aquí, como veremos. El caso de uso popular es “cuando quiero diseñar una lista horizontalmente” .

    Entonces tienes una lista…

    ul liThree/li liLittle/li liPiggies/li/ul

    Si quieres derribarlo en una fila, puedes…

    li { display: inline-block;}

    Y lo tienes.

    Escuché rápidamente en VoiceOver y la inline-blocklista todavía anuncia el elemento como una lista, pero no dice las viñetas, lo cual tiene sentido ya que no están allí. Ese es el problema con cambiar los displayelementos de la lista list-item: pierden, ejem, su carácter de elemento de lista.

    Una alternativa sería convertir el padre en un contenedor flexbox…

    ul { display: flex;}

    …lo que logra la fila horizontal (el valor predeterminado de flexbox), pero deja las viñetas ya que no está cambiando la visualización de los elementos de la lista. Depende de usted eliminarlo manualmente si lo desea.

    Listas centradas

    Speaking of lists, Jeff Starr just blogged about the idea of lists within centered text, which can get awkward as well. The awkwardness is that the text inside the list items can be centered, but the list item itself is still full-width, creating this situation where the bullet stays aligned to the left.

    Jeff’s solution was to inline-block the whole list. That keeps the list only as wide as the natural width of the content, allowing the bullets to leave the left edge and travel with the centered content. As long as there are block-level elements before and after, that is a good solution.

    By way of an alternative, if the goal is to shrink the width of the list to the width of the content, that could also be achieved like this without stopping the list from being block-level:

    ul { width: max-content; margin: 0 auto; text-align: left;}

    1. There is another tricky thing with inline-block. Like inline elements, any whitespace between them essentially renders as a space. So two 50% wide `inline-block` elements won’t fit on a line if there is any whitespace between them. Good thing there are tricks to fix that.
    2. I say “used to” because, if you were going to make a column system today, you’d almost certainly use flexbox or grid — or not build a “system” at all because just using the syntax of these largely negates the need for a system in the first place.





    SUSCRÍBETE A NUESTRO BOLETÍN 

    No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










    Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






    Tal vez te puede interesar:

    1. La innovación no puede mantener la Web rápida
    2. Rendimiento web ultrarrápido
    3. Tabla de contenidos fijos con estados activos de desplazamiento
    4. “cambiar tamaño: ninguno;” en áreas de texto es una mala experiencia de usuario

    ¿Cuándo usas el bloque en línea?

    ¿Cuándo usas el bloque en línea?

    BotonesNo lo olvides inline-flexyinline-gridtransformen un elemento en líneaNiños de columna que no se rompen por la mitad.Manera rápida de hacer que una li

    programar

    es

    https://pseint.es/static/images/programar-cuando-usas-el-bloque-en-lineaja-1638-0.jpg

    2024-06-13

     

    ¿Cuándo usas el bloque en línea?
    ¿Cuándo usas el bloque en línea?

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Update cookies preferences