html - tipos - CSS a salto de línea antes/después de un elemento en particular `inline-block`

tipos de display css

Question

Digamos que tengo este 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 se puede ver aquí: http://jsfiddle.net/YMN7U/1/

Ahora imagine que quiero dividir esto en tres columnas, el equivalente a inyectar un <br> después de la tercera <li> . (En realidad, hacerlo sería semántico y sintácticamente inválido).

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

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

También sé que este caso particular es posible mediante el uso de float lugar del inline-block , pero no estoy interesado en soluciones que usen float . También sé que con bloques de ancho fijo esto es posible configurando el ancho en la matriz principal a aproximadamente 3 veces ese ancho; No estoy interesado en esta solución. También sé que podría usar display:table-cell si quisiera columnas reales; No estoy interesado en esta solución. Estoy interesado en la posibilidad de forzar un descanso dentro del contenido en línea.

Edición : para ser claros, me interesa la "teoría", no la solución a un problema en particular. ¿Puede CSS inyectar un salto de línea en el medio de la display:inline(-block)? ¿Elementos, o es imposible? Si estás seguro de que es imposible, esa es una respuesta aceptable.

Answer 1

Cuando se permite volver a escribir el html, puede anidar <ul> s dentro de <ul> y simplemente dejar que el <li> interior se muestre como un bloque en línea. Esto también tendría sentido semánticamente en mi humilde opinión, ya que 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; }

Manifestación

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

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;
}

<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>

Answer 2

He sido capaz de hacer que funcione en elementos de LI en línea. Desafortunadamente, no funciona si los elementos LI están en el bloque en línea:

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

O la versión de notas del acantilado:

li { 
     display: inline; 
}
li:nth-child(3):after { 
     content: "/A";
     white-space: pre; 
}

Answer 3

Logré esto creando un :: antes del selector para el primer elemento en línea en la fila, y haciendo de ese selector 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;
}

Answer 4

No estás interesado en muchas "soluciones" a tu problema. No creo que realmente haya una buena manera de hacer lo que quieres hacer. Todo lo que inserte utilizando :after y content tiene exactamente la misma validez sintáctica y semántica que habría hecho si lo hubiera escrito allí mismo.

Las herramientas CSS proporcionan trabajo. Solo debes hacer flotar los li s y luego clear: left cuando quieras comenzar una nueva línea, como has mencionado:

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

Answer 5

Sé que no querías usar flotadores y la pregunta era solo teoría, pero en caso de que alguien lo encuentre útil, aquí hay una solución que usa flotadores.

Agregue una clase de izquierda a los elementos li que desea flotar:

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

y modifica tu 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 anchos o bloques en línea, y funciona tan atrás como IE6.

Answer 6

Tal vez sea completamente posible con solo CSS, pero prefiero evitar "flotar" tanto como pueda porque interfiere con la altura de los padres.

Si está utilizando jQuery, puede crear un complemento simple `wrapN` que sea similar a` wrapAll` excepto que solo envuelve los elementos "N" y luego rompe y envuelve los siguientes elementos "N" usando un bucle. Luego configura la clase de envoltorios 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í hay un JSFiddle del producto terminado:

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

Answer 7

Una forma fácil de dividir las listas en filas es mediante la flotación de los elementos de la lista individual y luego el elemento que desea ir a la siguiente línea que puede borrar el flotante.

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>

Answer 8

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

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

 ul { margin:0.5em auto;
-webkit-columns:2;
}