Geek asks and answers

How to create a vertical strip, that is, "|"?

How to create a vertical strip style, i.e. "|"? I need to change the width and height of "|".

This is what I am trying to do.

<a href="link1"> Link 1 </a> | <a href="link2"> Link 2 </a>
+5
source share
4 answers

Put it in an element and create an element:

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

In your stylesheet, for example:

.bar { font-size: 20px; }
+12
source

You should not use pipe ( |) as a separator, use css instead.

Let's say that the anchors were in a div, with id equal to breadcrumbs, for example:

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

Then you can add separators between them with a couple of css rules, for example:

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

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

, border-right: 5px solid green. () . .

:last-child .

, padding .

:

:

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

:

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

ul . inline-block, , li .

, , .

+8

| , , , . , | . , , , .

+6

css, . , . , : <span class="specialBar">...</span> , , .

, .

edit, :

" . ? - "

, CSS :

--span - ( ):

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

:

( , ).

- ( ):

border-left , . w3c CSS2, E + F F, - E." :

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

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

You can find more examples in this google hit: http://meyerweb.com/eric/articles/webrev/200007a.html

+1
source

More articles:


All Articles