div - row clearfix html

Separadores entre elementos sin hacks.

Question

Una cosa que a menudo quiero hacer al diseñar un sitio web es tener algunos elementos uno al lado del otro, con separadores entre ellos. Por ejemplo, si tengo 3 elementos, querría 2 separadores entre ellos, y nada en ninguno de los extremos.

Esto lo logro de varias maneras. Para el apilamiento vertical de elementos, a veces uso <hr /> . Horizontalmente, podría hacer algo como:

<div>
    <span class="notend">things</span>
    <span class="notend">stuff</span>
    <span>items</span>
</div>

.notend {
    border-right: solid black 1px;
}

¿Hay una forma más semántica de hacer esto? Quiero tener separadores entre elementos sin poner elementos de estilo en el html, o usar clases no semánticas. No me importa esto requiere hacky css, solo quiero hacer cosas con el estilo fuera de los archivos html.

Answer 1

¿Algo como esto?

CSS:

#note_list span {
    display:inline-block;
     padding:0 10px;
}
.notend {
    border-right:1px solid #000000;
}

HTML:

<div id="note_list">
  <span class="notend">things</span>
  <span class="notend">stuff</span>
  <span>items</span>
</div>

Answer 2

¿Qué tal algo como esto en tu ejemplo?

<div>
    <span>things</span>
    <span>stuff</span>
    <span>items</span>
</div>

div span{
   border-left: solid black 1px;
}
div span:last-child{
   border:none;
}

No hay necesidad de clases adicionales.

Answer 3

A menudo quiero tener una serie de artículos con punto y coma entre ellos.

Esto es lo que hago para esto:

.semi-list span:not(:last-of-type)::after {
  content: "; ";
 }

<div class="semi-list">
  <span>Item One</span>
  <span>Item Two</span>
  <span>Item Three</span>
</div>

Es una solución bastante flexible.

Árbitro:

• https://www.w3schools.com/cssref/sel_not.asp
• https://www.w3schools.com/csSref/sel_last-of-type.asp

Answer 4

Bueno, para empezar, puedes simplificarlo a esto:

<div>
    <span>things</span>
    <span>stuff</span>
    <span class="end">items</span>
</div>

span {
    border-right: solid black 1px;
}
span.end {
    border-right: none;
}

Si está dispuesto a dejar algo de soporte en navegadores antiguos, puede reducirlo a esto, utilizando la pseudo-clase: :last-child :

<div>
    <span>things</span>
    <span>stuff</span>
    <span>items</span>
</div>

span {
    border-right: solid black 1px;
}
span:last-child {
    border-right: none;
}

Answer 5

También puedes hacer esto:

span{position:relative;margin-left:5px}

span:after{
    content:"|";
    position:absolute;
    left:-5px;
}
span:first-child:after{
    content:"";

}

En este método también puede utilizar otros separadores como / , /

http://jsfiddle.net/sandeep/UNnxE/

Answer 6

Utilizar esta:

#menu span + span {
    border-left: solid black 1px;
}

http://jsfiddle.net/thirtydot/QxZ6D/

Eso aplicará el border-left a todos excepto el primer span .

El selector de hermanos adyacente ( + ) es compatible con todos los navegadores modernos, excepto IE6.

Otra forma de hacerlo es esta, que a veces es mejor porque puede mantener todas las declaraciones de los "botones de menú" en un bloque:

http://jsfiddle.net/thirtydot/QxZ6D/1/

#menu span {
    border-left: solid black 1px;
    /*
    a: bunch;
    of: stuff;
    */
}
#menu span:first-child {
    border-left: 0
}

Esto tiene exactamente el mismo nivel de soporte de navegador que la primera solución.

Tenga en cuenta que si le gusta esta solución, es mejor usar :first-child lugar de :last-child , porque :first-child (de CSS2) es compatible con IE7 / 8 y :last-child (¡solo introducido en CSS3!) no es