縦棒のスタイルを設定するにはどうすればいいですか？

Question

縦棒のスタイルを変更するにはどうすればいいですか？私は "|"の幅と高さを変える必要があります。

これは私がやろうとしていることです。

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

Answer 1

を要素を要素に入れ、そしてスタイル：

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

スタイルシートでは、例えば、

.bar { font-size: 20px; } 

Answer 2

あなたの要素の唯一の文字でない限り、個々の文字をCSSで簡単にスタイルすることはできません。それがテキストエリアにある場合、あなたは希望がありません。そうでない場合、あなたは望みを持っています。スタイルを設定するテキストに手動で<span class="specialBar">...</span>というタグを追加する必要があります。

もう1つのユニコード垂直バー文字を使用することもできますあなたの好みに。

---

編集に応答して： "？私は基本的にリンク間sepratorを望んでいた私は間違った方向に行くアム - オリジナルポスター"

理想的にスパンを使用します。これをCSSでシェイプして、細い縦線をエミュレートすることができます。

エミュレート-と-スパンテクニック - （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">... 

画像技術：

また（、あまりエレガントな詳細には触れません）画像を使用することができます。

兄弟セレクタ技術 - （live demo）：

あなたはまずありませんすべてのリンクでborder-leftをも設定することができます。 CSS2 adjacency selectorsのw3c仕様によれば、 "E + Fは、兄弟要素Eの直前のF要素と一致します。したがって：

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

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

このGoogleでより多くの例を見つけることができるかもしれないがヒット：http://meyerweb.com/eric/articles/webrev/200007a.html

Answer 3

|は文字であり、su chは、テキストに適用できる任意のスタイルを取ります。私は、あなたがボックス境界を構築するために|を使用しようとしているかもしれないという印象を得る。そのような場合は、文字を使用しようとする境界線をブロックレベル要素に設定するほうがはるかに優れています。

Answer 4

セパレータとしてパイプ（|）を使用しないでください。代わりにcssを使用してください。

は、アンカーはこのように、breadcrumbsに等しいidを持つ、divの中にいたと言う：

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

あなたは、このように、カップルのCSSルールでそれらの間のセパレータを追加することができます。

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

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

border-right: 5px solid greenルールでセパレータのサイズ、スタイル、色を変えることができます。 Here's an example（更新されました）ボーダースタイリングでHere's some documentation

:last-childの2番目のルールでは、最後の要素の後ろに余分な区切り記号が付きません。

セパレータの高さを変えるには、最初のルールで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より良いセマンティクスのためにあなたのリンクのリストをマークアップする。 1行に入れるにはinline-blockを追加する必要があります。liは、デフォルトではブロックレベルの要素です。

また、パディングとボーダーのルールを変更することで、さまざまなスタイルを実現できました。