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

¿Cómo eliminar el margen de cada

  • de la última columna? Estoy pidiendo cada
  • que viene en la última columna cuando tengo 9
  • y 3 en cada columna. No estoy pidiendo simplemente eliminar el margin del último elemento de
      que ya sé :last-child { margin-right: 0 }

      Y si la pantalla es pequeña o el usuario cambia el tamaño del navegador, 3 + 3 + 3 puede convertirse en 4 + 5 o 2 + 2 + 2 + 2 + 1

      Entonces, en cualquier condición cualquier

    • (puede ser uno o más de uno) que viene en la última columna. Quiero eliminar el margin-right .

      Todos los li están dentro de un solo ul

       
      • item 1
      • item 2
      • item 3
      • item 4
      • item 5
      • item 6
      • item 7
      • item 8
      • item 9

      Agregué jsfiddle aquí: http://jsfiddle.net/GnUjA/1/

      No se puede eliminar o agregar estilos en un elemento específico de cada fila 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 hacer en el caso de los márgenes es disimularlos agregando márgenes negativos en el elemento padre. Esto dará la ilusión de que los elementos de su hijo encajan dentro del elemento padre mientras aún tienen espacio entre los elementos individuales:

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

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

      Dividir el margen por la mitad y configurarlo en ambos lados ( margin-left: 5px; margin-right: 5px ) puede dar mejores resultados que un margen único en un lado ( margin-right: 10px ), particularmente si su diseño necesita funcionar con direcciones LRT y 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.

      Preguntas de los medios

      Si puede predecir razonablemente cuántos elementos va a haber por fila, puede usar las consultas de 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. */ 
    • Creo que esto es lo que quieres (jquery):

      http://jsfiddle.net/PKstQ/

      Si ese violín demuestra lo que estás buscando hacer (excepto con margen en lugar de color de fondo) entonces no puedes 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.

      Para mí, tiene más sentido darle al lado izquierdo de ul algo de relleno que lo equilibre.

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

      Depende si sería necesario pero lo mismo realmente va a la cima:

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

      Editar: respuesta reescrita después de mirar el HTML de muestra

      Lo que quieres hacer no es posible con CSS. La razón es que desea diseñar elementos basados ​​en el diseño renderizado , que CSS solo le permite trabajar en función de 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.