¿Cómo se diseña la barra vertical, es decir, "|"?

Question

¿Cómo doy estilo a la barra vertical, es decir, "|"? Necesito variar el ancho y la altura de "|".

Esto es lo que estoy tratando de hacer.

<a href="link1"> Link 1 </a> | <a href="link2"> Link 2 </a> 

Answer 1

lo puso en un elemento, y el estilo del elemento:

<span class="bar">|</span> 

En su hoja de estilo, por ejemplo:

.bar { font-size: 20px; } 

Answer 2

Realmente no se puede crear fácilmente caracteres individuales con css, a menos que sea el único carácter en su elemento. Si está en un área de texto, no tienes esperanza. Si no lo es, tiene esperanza: tiene que aumentarlo manualmente con las etiquetas <span class="specialBar">...</span> siempre que aparezca en el texto en el que desea aplicar el estilo.

También puede usar otro carácter de barra vertical unicode que sea más a tu gusto

---

edición, en respuesta a:

"Básicamente quería un seprator entre los enlaces son yo que va en la dirección equivocada - cartel original.?"

Lo ideal es utilizaría tramos, que puede dar forma con CSS para emular una delgada línea vertical:

emule-con-un-palmo técnica - (live demo):

.linkSeparator { 
    display:inline-block; 
    margin-bottom:-1em; /*value should be (height-1em)/2*/ 
    height:3em; width:0.25em; 
    background-color:grey; 
    margin-left:0.5em; margin-right:0.5em; 
}​ 

link1<span class="linkSeparator"></span>link2<span class="linkSeparator">... 

imágenes técnica:

También es posible usar imágenes (menos elegantes, no voy a entrar en detalle).

hermanos técnica de selección - (live demo):

También puede establecer el border-left en todos los enlaces que no son la primera. De acuerdo con la especificación w3c en CSS2 adjacency selectors, "E + F Coincide con cualquier elemento F inmediatamente precedido por un elemento hermano E." Por lo tanto:

.separatedLinks a+a { 
    border-left: 2px solid black; 
} 

<??? class="separatedLinks"> 
    <a href="...">link1</a> 
    <a href="...">link2</a> 
    <a href="...">link3</a> 
</???> 

Usted puede ser capaz de encontrar más ejemplos en este Google recibido: http://meyerweb.com/eric/articles/webrev/200007a.html

Answer 3

| es un personaje, y como su ch, toma cualquier estilo que pueda aplicar al texto. Me da la impresión, sin embargo, de que podría estar tratando de usar | para construir un borde de caja. Si ese es el caso, es mucho mejor diseñar un elemento de nivel de bloque para tener un borde que intente usar caracteres.

Answer 4

No debe utilizar la tubería (|) como separador, use css en su lugar.

dicen los anclajes estaban en un div, con id igual a breadcrumbs, así:

<div id="breadcrumbs"> 
    <a href="#">One</a> 
    <a href="#">Two</a> 
    <a href="#">Three</a> 
</div>​ 

A continuación, puede añadir separadores entre ellos con unas reglas par css, así:

#breadcrumbs a { 
    padding: 0.5em; 
    border-right: 5px solid green; 
} 

#breadcrumbs a:last-child { 
    border-right: none; 
}​ 

Puede variar el tamaño, el estilo y el color del separador con la regla border-right: 5px solid green. Here's an example (actualizado) en acción. Here's some documentation en el estilo del borde.

La segunda regla con :last-child impide un separador adicional después del último elemento.

Para variar la altura del separador, debe cambiar el padding en la primera regla.

Por demanda popular, una versión lista:

Si pones los enlaces en una lista:

<ul id="breadcrumb-list"> 
    <li><a href="#">One</a></li> 
    <li><a href="#">Two</a></li> 
    <li><a href="#">Three</a></li> 
</ul>​ 

y utilizar las reglas de esta manera:

ul#breadcrumb-list li { 
    display: inline-block; 
    margin: 0; 
    padding: 1em 1em 0 1em; 
    border-right: 1px dotted blue; 
} 

ul#breadcrumb-list li:last-child { 
    border-right: none; 
} 

Usted puede utilizar a ul para marcar su lista de enlaces para una mejor semántica. Tiene que agregar el inline-block para ponerlos en una línea, li es por defecto un elemento de nivel de bloque.

También he mostrado un estilo diferente que puede lograr al variar las reglas de relleno y borde.