¿Cómo eliminar el margen de cada elemento que es el último elemento de una fila?

Question

¿Cómo eliminar el margen de cada <li> de la última columna? Estoy pidiendo cada <li> que viene en la última columna cuando tengo 9 <li> y 3 en cada columna. No estoy pidiendo simplemente para eliminar margin del último elemento de la última <li> de un <ul> que ya sé :last-child { margin-right: 0 }

Y si la pantalla es pequeña o usuario cambiar el tamaño del navegador y luego 3 + 3 + 3 puede llegar a ser de 4 + 5 o 2 + 2 + 2 + 2 + 1

lo tanto, en cualquier condición de cualquier <li> (que puede ser una o más de una) que entra en la última columna. Quiero eliminar margin-right.

Todo li se encuentran dentro de una única ul

<ul> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    <li>item 4</li> 
    <li>item 5</li> 
    <li>item 6</li> 
    <li>item 7</li> 
    <li>item 8</li> 
    <li>item 9</li> 
</ul> 

añadí jsFiddle aquí: http://jsfiddle.net/GnUjA/1/

Answer 1

Editar: Respuesta reescrito después de mirar en HTML muestra

Lo que quiere hacer no es posible con CSS. El motivo es que desea aplicar estilos a los elementos según el diseño representado, que CSS solo le permite trabajar según la estructura del documento.

Algo como esto solo se puede lograr con el scripting del lado del cliente (Javascript), que puede consultar las propiedades de diseño renderizadas y actuar en consecuencia.

Answer 2

Creo que esto es lo que quiere (jQuery):

http://jsfiddle.net/PKstQ/

Si violín que demuestra lo que está buscando hacer (excepto con el margen en lugar de background-color), entonces no se puede hacer eso con css. Necesitarás javascript Si jquery es aceptable, entonces ese violín publicado se puede modificar fácilmente. Sería relativamente trivial convertirlo en js puro también.

Answer 3

Para mí tiene más sentido dar al lado izquierdo de ul un relleno que lo iguala.

añadí: ul { padding-left: 10px; }-http://jsfiddle.net/GnUjA/30/

depende de si sería necesario pero el mismo realmente va a la cima:

ul { padding-top: 10px; padding-left: 10px; }-http://jsfiddle.net/GnUjA/31/

Answer 4

La eliminación o adición de estilos de un elemento específico de cada fila no se puede hacer con CSS puro a menos que sepa exactamente cuántos elementos hay por fila (a través de la familia de selectores nth-child()).

márgenes negativos

Lo que puede qué hacer en el caso de los márgenes es disfraz mediante el añadido de los márgenes negativos en el elemento padre.Esto dará la ilusión de que sus elementos secundarios encajan en el interior del elemento padre mientras que todavía tiene espaciado entre los elementos individuales:

http://codepen.io/cimmanon/pen/dwbHi

ul { 
    margin-left: -5px; 
    margin-right: -5px; 
} 

li { 
    margin-left: 5px; 
    margin-right: 5px; 
} 

Splitting el margen en medio y se establece en ambos lados (margin-left: 5px; margin-right: 5px) puede da mejores resultados que un solo margen en un lado (margin-right: 10px), particularmente si su diseño necesita trabajar con LRT y direcciones RTL.

Nota: esto puede requerir la adición de overflow-x: hidden en un elemento ancestro para evitar el desplazamiento horizontal, dependiendo de qué tan cerca esté el elemento contenedor en el borde de la ventana gráfica.

Consultas de medios

Si razonablemente se puede predecir la cantidad de artículos que van a ser por fila, puede utilizar preguntas de los medios para orientar el último elemento de la fila a través de nth-child(). Esto es considerablemente más detallado que usar márgenes negativos, pero le permitiría hacer otros ajustes de estilo:

@media (min-width: 400px) and (max-width: 499px) { 
    li:nth-child(even) { 
     margin-right: 0; 
     border-right: none; 
    } 
} 

@media (min-width: 500px) and (max-width: 599px) { 
    li:nth-child(3n+3) { 
     margin-right: 0; 
     border-right: none; 
    } 
} 

@media (min-width: 600px) and (max-width: 799px) { 
    li:nth-child(4n+4) { 
     margin-right: 0; 
     border-right: none; 
    } 
} 
/* etc. */