Digamos que tengo este código HTML:

<h3>Features</h3>
<ul>
    <li><img src="alphaball.png">Smells Good</li>
    <li><img src="alphaball.png">Tastes Great</li>
    <li><img src="alphaball.png">Delicious</li>
    <li><img src="alphaball.png">Wholesome</li>
    <li><img src="alphaball.png">Eats Children</li>
    <li><img src="alphaball.png">Yo' Mama</li>
</ul>

y este CSS:

li { text-align:center; display:inline-block; padding:0.1em 1em }
img { width:64px; display:block; margin:0 auto }

El resultado puede ser visto aquí: http://jsfiddle.net/YMN7U/1/

Ahora imagina que quiero romper esta en tres columnas, el equivalente de la inyección de una <br> después de la tercera <li>. (En realidad, haciendo que sería semántica y sintácticamente válida.)

Sé cómo seleccionar el tercer <li> en CSS, pero ¿cómo puedo forzar un salto de línea después de que? Esto no funciona:

li:nth-child(4):after { content:"xxx"; display:block }

También sé que este caso en particular es posible mediante el uso de float en lugar de inline-block, pero no estoy interesado en soluciones mediante el uso de float. También sé que con ancho fijo de bloques de esto es posible mediante el ajuste de la anchura de los padres ul a cerca de 3 veces la anchura; no estoy interesado en esta solución. También sé que yo podría usar display:table-cell si quería real de las columnas; no estoy interesado en esta solución. Estoy interesado en la posibilidad de forzar una ruptura en el interior de contenido en línea.

Editar: Para que quede claro, estoy interesado en la «teoría», no es la solución a un determinado problema. Puede CSS inyectar un salto de línea en el medio de display:inline(-block)? elementos, o es imposible? Si estás seguro de que es imposible, que es una respuesta aceptable.

  • Ponga el 1 de tres y el 2 de tres en dos listas diferentes? Estoy asumiendo que usted no quiere hacer esto, pero pensé»d tirar por ahí.
  • Parece que necesitamos que nos digas lo que realmente está tratando de lograr aquí, así que alguien puede recomendar el mejor método. Todas las opciones que se excluyen existen para resolver el problema que usted tiene, ¿por qué otra solución?
  • Yo estaba haciendo exactamente lo que he dicho: el uso de una semántica de la lista de elementos y queriendo envolver después de particulares. En la práctica que establezca el ancho del contenedor, pero esto sólo funciona en mi caso en particular porque los elementos que pasó a ser del mismo ancho, y quería envolver en un borde consecuente. Esto podría no ser siempre el caso. Lo que yo soy «realmente tratando de lograr», es aprender si o no de CSS puede forzar un salto de línea en el medio de en línea de flujo. La respuesta segura «Esto definitivamente no es posible» es aceptable (si es correcto).
InformationsquelleAutor Phrogz | 2011-01-05

9 Comentarios

  1. 298

    He sido capaz de hacerlo funcionar en en línea LI elementos. Por desgracia, no funciona si la batería de LI elementos inline-block:

    Demostración en vivo: http://jsfiddle.net/dWkdp/

    O el acantilado de las notas de la versión:

    li { 
         display: inline; 
    }
    li:nth-child(3):after { 
         content: "\A";
         white-space: pre; 
    }
    • Sime, ¿por qué el «\» no se consigue imprimir? Todo lo que he intentado con el :after siempre se imprime como texto directamente.
    • Eso es ASCII 0x0A, también conocido como un LF (avance de línea) de carácter. Consulte w3.org/TR/CSS2/syndata.html#strings
    • es el carácter de avance de línea… es un escape
    • Este es un resultado muy interesante, gracias. (Voy a votar hasta cuando puedo obtener más votos en un par de horas).
    • Puede 1 de ustedes me apunte en la dirección de una tabla o algo que me muestra que de los caracteres ASCII son posibles en la content: bloque? He buscado en google, pero no estoy consiguiendo las cosas. Gracias
    • Oficial de especificaciones: w3.org/TR/CSS21/syndata.html#strings Sitepoint: reference.sitepoint.com/css/content
    • ¿Cómo se puede romper una nueva línea después de que el último elemento?
    • href=»http://jsfiddle.net/dWkdp/609/» >jsfiddle.net/dWkdp/609
    • Gran consejo! Por desgracia, esto no funciona bien con la minimización de la funcionalidad en MVC ScriptBundle, como la minimización de código realmente reemplaza el \a con un salto de línea en el siguiente código CSS, y hace que el css no válido… no entiendo por qué lo hace (de repuesto de un byte, pero lo hacen buggy…)
    • Yo estaba buscando una manera de añadir algo de espaciado adicional junto con los saltos de línea, y se encontró que si se agrega font-size: 1.3em; vertical-align: top; es el equivalente de un 0.3 em margen junto con la nueva línea. jsfiddle.net/mblase75/SmEnR
    • comentar aquí, ya que siguen llegando de nuevo a esta pregunta cada pocos meses… no funciona en inline-block debido a que usted está agregando saltos de línea dentro de algo que actúa como un bloque contenedor dentro de una línea de contexto. Si usted podría romper el contexto de insertar el salto de línea entre el <li>s de que iba a funcionar. Realmente la vergüenza como esto es útil para el diseño sensible puntos de interrupción. Supongo que la mayoría del tiempo «en línea» es tan útil como inline-block para las listas
    • No creo que esto funciona en IE
    • No creo? Lo has probado?
    • Me volvería a evitar :después, si es posible, ya que no trabajo para IE7 y tiene soporte parcial en IE8. Si usted no tiene para apoyar a los que se vuelven locos (lo hacemos no usar css generadores de contenidos)
    • Usted siempre puede tener inline lis y hacer que su único hijo inline-block. De esa manera usted puede insertar un salto de línea donde tú quieras y aún así obtener un bloque de comportamiento dentro de cada li.
    • Y no hacer una demostración y mostrar a mí porque…? 🙂
    • Ahh, tengo la codificación de hacer y de cuentas a pagar, pero que se ha hecho tan bien y sonrió… jsfiddle.net/p39L92xn/9 🙂
    • ¿Por qué detenerse en inline-block? Pero los verdaderos bloques de allí 🙂 jsbin.com/herofe/edit?html,css,salida
    • en línea con bloques de permitir a cabo-de-la-caja automática de ancho, justo lo que quería 🙂
    • ¿Qué acerca de la compatibilidad entre navegadores ? Gracias.
    • Funciona en todas partes he comprobado.
    • Genial, pero lamentablemente no funciona en IE11 + Edge cuando se utiliza con el relleno.
    • Gracias! usted puede ir para white-space:pre-línea para evitar efectos secundarios
    • esto no funciona en chrome 2017
    • A mí me funciona. Lo que Chrome versión y sistema operativo tienes?
    • windows 10 y más reciente de chrome, pero está bien que yo he utilizado Marcus Whybrow del método

  2. 21

    Usted no está interesado en un montón de «soluciones» al problema. No creo que haya realmente es una buena manera de hacer lo que quieres hacer. Cualquier cosa que usted inserte el uso de :after y content tiene exactamente la misma semántica y sintáctica de validez que se habrían realizado si había escrito allí mismo.

    Las herramientas CSS dar trabajo. Usted debe flotar el lis y, a continuación, clear: left cuando se desea iniciar una nueva línea, como usted ha dicho:

    Ver un ejemplo: http://jsfiddle.net/marcuswhybrow/YMN7U/5/

    • El OP no está interesado en la solución 🙂
    • Así nada se puede hacer mediante el uso de :after será sintácticamente válida o una buena idea, ya que ya hay herramientas para ello. De ahí la respuesta.
    • Él dijo: «no flota» aunque @Marcus la respuesta es probablemente la mejor solución. Muchacho el «float» de la propiedad realmente recibe una paliza por aquí ¿no?
    • También no veo que poco y al final, lo siento por eso, pero seguramente debe utilizar las herramientas CSS da para hacer el trabajo fácilmente.
    • Agradezco su ayuda, y puedo apreciar su frustración. Pido disculpas por no aclarar que mi pregunta era acerca de la posibilidad teórica, en lugar de tratar de lograr un diseño particular. He editado mi pregunta espero que aclarar esto.
    • Ah OK eso tiene más sentido, a continuación, se ve como la comisión paritaria marítima tiene la respuesta definitiva 🙂
    • Sólo me preguntaba por qué el OP no desea utilizar flotadores??
    • Una de las razones para no utilizar flotadores es que no hay tal cosa como float: center.
    • además inline-block permite todo tipo de alineación vertical que flota no puede
    • «Cualquier cosa que usted inserte mediante :después de contenido y tiene exactamente la misma semántica y sintáctica de validez» – llegando tarde a la fiesta, pero estoy totalmente en desacuerdo con esto – el punto de uso :before y :after es ser capaz de insertar un estilo que no interfieren con el significado semántico de la Html.
    • Usted tergiversa el propósito de cartel de la pregunta de y en general – es el propósito de todo lo que es flotar pensado para. Por favor, la próxima vez trate de encontrar la razón, ¿por qué cartel no desea utilizar ciertas soluciones, antes de la publicación redundante respuesta. Gracias 🙂
    • Otro problema con float es que toma los elementos de flotación de la publicación de flujo, por lo que la rodea <ul> no tendrá asignado la altura, la anchura que su contenido se consume.

  3. 4

    Una manera fácil dividir las listas de filas está flotando el individuo los elementos de la lista y, a continuación, el elemento que desea ir a la siguiente línea puede borrar el flotador.

    por ejemplo

    <li style="float: left; display: inline-block"></li>
    <li style="float: left; display: inline-block"></li>
    <li style="float: left; display: inline-block"></li>
    
    <li style="float: left; display: inline-block; clear: both"></li> --- this will start on a new line
    <li style="float: left; display: inline-block"></li>
    <li style="float: left; display: inline-block"></li>
    • Usted debe notar que el float reemplaza el inline-block configuración. Realmente no conviven juntos
    • si utiliza text-aling: center; no va a funcionar (flotante se rompe)
  4. 4

    Cuando la reescritura de html está permitido, puede anidar <ul>s dentro de la <ul> y dejar que el interior <li>s pantalla como inline-block. Esto también semánticamente sentido en mi humilde opinión, como la agrupación también se refleja en el html.


    <ul>
        <li>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>Item 4</li>
                <li>Item 5</li>
                <li>Item 6</li>
            </ul>
        </li>
    </ul>

    li li { display:inline-block; }

    Demo

    JS:

    $(function() { $('img').attr('src', 'http://phrogz.net/tmp/alphaball.png'); });

    CSS:

    h3 {
      border-bottom: 1px solid #ccc;
      font-family: sans-serif;
      font-weight: bold;
    }
    ul {
      margin: 0.5em auto;
      list-style-type: none;
    }
    li li {
      text-align: center;
      display: inline-block;
      padding: 0.1em 1em;
    }
    img {
      width: 64px;
      display: block;
      margin: 0 auto;
    }

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <h3>Features</h3>
    <ul>
      <li>
        <ul>
          <li><img />Smells Good</li>
          <li><img />Tastes Great</li>
          <li><img />Delicious</li>
        </ul>
      </li>
      <li>
        <ul>
          <li><img />Wholesome</li>
          <li><img />Eats Children</li>
          <li><img />Yo' Mama</li>
        </ul>
      </li>
    </ul>

  5. 3

    Sé que usted no desea utilizar flotadores y la cuestión era sólo teoría, pero en caso de que alguien encuentra este útil, aquí tienes una solución con el uso de flotadores.

    Agregar una clase de la izquierda a su li elementos que desea float:

    <li class="left"><img src="http://phrogz.net/tmp/alphaball.png">Smells Good</li>

    y modificar el código CSS de la siguiente manera:

    li { text-align:center; float: left; clear: left; padding:0.1em 1em }
    .left {float: left; clear: none;}

    http://jsfiddle.net/chut319/xJ3pe/

    No es necesario especificar el ancho de la línea de bloques y funciona tan lejos como IE6.

  6. 1

    Que he logrado esto mediante la creación de un ::antes de selector para el primer elemento en línea en la fila, y hacer que el selector de un bloque con un margen superior o inferior para separar las filas un poco.

    .1st_item::before
    {
      content:"";
      display:block;
      margin-top: 5px;
    }
    
    .1st_item
    {
      color:orange;
      font-weight: bold;
      margin-right: 1em;
    }
    
    .2nd_item
    {
      color: blue;
    }
  7. -1

    Nota seguro de que esto va a funcionar, dependiendo de cómo se procesa la página. Pero ¿y acaba de empezar una nueva lista desordenada?

    es decir,

    HTML:

    <ul>
    <li>
    <li>
    <li>
    </ul>
    <!-- start a new ul to line break it -->
    <ul>

  8. -2

    Una solución mejor es utilizar -webkit-columnas:2;

    http://jsfiddle.net/YMN7U/889/

     ul { margin:0.5em auto;
    -webkit-columns:2;
    }
    • Para algunos casos de uso, esto puede ser una solución razonable. No es una buena solución en este caso, porque es completamente re-ordena el contenido a ir hacia abajo-entonces-en lugar de a través de, a continuación, hacia abajo.
    • Que sería quiere hacer una aplicación web que solo funciona en algunos navegadores?
  9. -3

    Tal vez es completamente posible con CSS pero prefiero evitar «float» tanto como me sea posible, ya que interfiere con sus padres altura.

    Si usted está usando jQuery, puede crear un simple `wrapN` plugin que es similar a » wrapAll`, excepto que sólo se ajusta «N» elementos y luego se rompe y se ajusta a la siguiente «N» elementos mediante un bucle. A continuación, establezca su envoltorios de clase a `display: block;`.

    (function ($) {
        $.fn.wrapN = function (wrapper, n, start) {
            if (wrapper === undefined || n === undefined) return false;
            if (start === undefined) start = 0;
            for (var i = start; i < $(this).size(); i += n)
               $(this).slice(i, i + n).wrapAll(wrapper);
            return this;
        };
    }(jQuery));

    $(document).ready(function () {
        $("li").wrapN("<span class='break' />", 3);
    });

    Aquí es un JSFiddle del producto terminado:

    http://jsfiddle.net/dustinpoissant/L79ahLoz/

Dejar respuesta

Please enter your comment!
Please enter your name here