Tengo un H3 título que me gustaría estilo como tener un determinado color de fondo, pero sin tener el elemento del fondo ocupan todo el ancho del elemento padre. Viendo como H3 es por defecto de un elemento de bloque, mi estilo era necesario cambiar el elemento de una línea de-elemento de bloque, o simplemente en una línea de elemento en línea así:

h3 {
    background-color: #333;
    color: white;
    display: inline-block;
}

Esto va a funcionar bien, pero solo si es seguido inmediatamente por un elemento de bloque. No quiero cambiar el marcado sólo para atender a este estilo, así que me preguntaba si hay una manera de hacer que cualquier elemento adyacente, independientemente de cómo se muestra, para empezar, en la siguiente línea?

Asumir puedo usar CSS3.

De todos modos, ¿por qué ‘lo que es una mejor manera … de lo que es un elemento de bloque’? Lo que no es bueno acerca de lo que es un elemento de bloque?
He explicado esto en mi pregunta. Un elemento de bloque que ocupa todo el ancho del elemento padre, que sería un lío el estilo que estoy buscando.
trate de padding-bottom: 15px; display: table;

OriginalEl autor Nathan Ridley | 2010-09-21

6 Comentarios

  1. 12

    intente esto:

    h3:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    +1 para la inventiva, pero no me funciona en Chrome
    :after tiene muy irregular apoyo
    De hecho, creo que este tipo de cosas es bastante común, especialmente con flotador de compensación. A mí me funciona en Chrome. @Litso – usted seguro de que hiciste lo correcto?

    OriginalEl autor PeterWong

  2. 2
    display:block;
    width:auto;

    Esto hará que el ancho de tan pequeño como sea posible (no llenar todo el elemento padre) y otros elementos que aparecen a continuación.

    *Otros de lo que es un elemento de bloque. Al menos leer el título.
    Lo siento, he leído ‘sin’ como ‘con’, mi mal. He actualizado respuesta, y todavía lo creo block es la manera correcta de hacerlo.
    En realidad, esto es lo que se le pidió. El OP quería algo que se trabaja en el diseño como un elemento de bloque (que vive por sí mismo verticalmente) pero restringe el área de fondo a la anchura de los contenidos. La pregunta por el «no bloquear» solución debido a que el OP no sabía que un elemento de bloque que podría actuar de esa manera.
    que es muy cierto. @fredley – Buena sugerencia, sin embargo la configuración de un auto de la anchura de un elemento de bloque que simplemente dice lo que está bien para obedecer su comportamiento por defecto, que es llenar el ancho del elemento padre. He probado en Chrome, de todos modos, lo que confirma esto.
    probado en firefox, elemento aún así obtener todo el ancho de su padre

    OriginalEl autor fredley

  3. 2

    ¿Con qué frecuencia sucede que el elemento después de la <h3> es un elemento en línea? (Generalmente después de un encabezado debe ser como un <p>, <ul> u otros elementos de bloque, aunque esto depende totalmente de tu html. Es predecible? Es una opción que a su vez sólo cada elemento que sigue directamente de un <h3> en un elemento de bloque?

    h3 ~ * { display: block }

    La otra única manera que conozco para tener un bloque de elementos no ocupan todo el espacio es flotante, pero esto deja a otro problema.

    El elemento después de la H3 podría ser fácilmente un inline-block elemento, o podría ser flotado a la izquierda, que se sentaba en la misma línea que el H3. También, forzando a los adyacentes elemento de a es un elemento de bloque, va a reemplazar cómo interactúa con su propia siguiente hermanos, que puede tener consecuencias no deseadas.

    OriginalEl autor Stephan Muller

  4. 1

    Venir a través de todo el tiempo en mi código, generalmente, por la del div que se inline-block ed. La mejor forma que he visto es la fuerza de una nueva línea que se utiliza para ajustar su código en otros div. Html original se presenta el formato que se esperaba y el div contenedor de las fuerzas de una nueva línea.

    Suponiendo que esta es tu h3 estilo,

    h3 {
      display: inline-block;
    }

    A continuación, basta con ponerla en un div.

    <div>
       <h3>My heading</h3>
    </div>

    OriginalEl autor David Rutherford

  5. 0

    He tenido que hacer algo similar con en línea nav elementos que necesitan romper en ciertos puntos. Hace este trabajo?

    h3:after {
      content: "\A ";
      line-height: 0;
      white-space: pre;
      display:inline-block;
    }

    Me parece recordar que IE7 tener un problema con él.

    \A es existen bug otro navegador, prueba a \00000a 😉 … no hay necesidad inline-block y línea-altura, a solo bloque

    OriginalEl autor user1010892

  6. 0

    Si usted no necesita el centro de h3, esto puede ayudar a:

    h3 {
      background-color: #333;
      color: white;
      display: inline-block;
      float: left;
      clear: left;
    }

    OriginalEl autor Rotareti

Dejar respuesta

Please enter your comment!
Please enter your name here