9

垂直バー、つまり「|」のスタイルを設定するにはどうすればよいですか? 「|」の幅と高さを変える必要があります。

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

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

4 に答える 4

17

それを要素に入れ、要素のスタイルを設定します。

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

たとえば、スタイルシートでは次のようになります。

.bar { font-size: 20px; }
于 2012-05-14T13:10:48.670 に答える
16

区切り記号としてパイプ ( |) を使用しないでください。代わりに css を使用してください。

次のように、アンカーが と等しい id の div にあるとしbreadcrumbsます。

<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ルール を使用して、セパレーターのサイズ、スタイル、および色を変えることができます。実際の例（更新済み）を次に示します。 境界線のスタイリングに関するドキュメントを次に示します。

の 2 番目のルールは: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それらを1行に配置するには、を追加する必要がありliます。デフォルトではブロックレベルの要素です。

また、パディングとボーダーの規則を変更することで達成できる別のスタイルも示しました。

于 2012-05-14T13:25:55.423 に答える
7

|は文字であるため、テキストに適用する可能性のあるスタイルをすべて受け取ります。|ただし、ボックスの境界線を作成するために使用しようとしている可能性があるという印象を受けます。その場合は、文字を使用しようとする境界線を持つようにブロック レベル要素をスタイル設定する方がはるかに優れています。

于 2012-05-14T13:13:03.430 に答える
1

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

好みに合わせて、別の Unicode 縦棒文字を使用することもできます。

edit、への応答:

「基本的にはリンク間にセパレーターが欲しかった。間違った方向に進んでいるのだろうか? – 元のポスター」

理想的には、CSS を使用して細い垂直線をエミュレートできるスパンを使用します。

エミュレート ウィズ ア スパン テクニック - (ライブ デモ):

.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最初ではないすべてのリンクに を設定することもできます。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

于 2012-05-14T13:10:19.720 に答える