0

私はこれらの「|」のいくつかを使用しています 互いに隣接するリンクを分離しているので、私がコーディングしているWebサイト上の異なるリンクを分離します。これを行うためにCSSに直接追加できるコードのチャンクはありますか？

「すべてを着色|＃383838」

これが私のHTMLで行っていることの例です：

ホーム| ページ1

^私は実際のリンクを使用しませんでしたが、それが私のサイトに表示される方法です。（ただし、これらの色ではありません）...これを行うために使用したコードは次のとおりです。

<p><a href="LINK HERE">Home</a> | <a href="LINK HERE">Page 1</a>

問題：私のページでは、すべてのテキストとリンクが1色です。「|」を持っている HTMLのコードでは、自動的に「|」が変わります。他のすべてのテキストやリンクと同じ色。CSS内に何かを追加して、すべての「|」を作成できますか？別の色？

Juhanaのソリューションは機能することになりました。ただし、<p> </ p>でラップすると、すべてが再び同じ色に戻ります...そして<p> </ p>でラップする必要があります。そうしないと、真上に配置されます。著作権フッターの...スペースなしで（<p> </ p>を追加せずに）互いに重なり合うようにスペースを作成する方法についてのアイデアはありますか？

<br />を使用して、自分の解決策を見つけることになりました。

助けてくれたみんなに感謝します。

4

5 に答える 5

3

border-right :solid 1px #000000;このcss：をアンカーリンクの周りのタグに適用できます。

于 2013-03-16T08:00:01.343 に答える
3

順序付けされていないリストを使用してリンクを配置し、|を追加します そのように：

li:after {
    content: '|';
}
于 2013-03-16T08:02:25.530 に答える
1

MarcinJuraszekはかなり正しいです、私は同じことをします。しかし、私も追加します：

li:last-child:after {
   content: '';
}

最後のリンクの後の行を削除するには

于 2013-03-16T08:06:51.130 に答える
1

マークされていないテキスト内の個々の文字のスタイルを設定することはできません。|文字がリンクグループ内の唯一の非リンクテキストである場合は、それをdivでラップし、そのスタイルを設定します。リンクの色には影響しません。

<div class="links">
    <a href="LINK HERE">Home</a> | <a href="LINK HERE">Page 1</a>
</div>

CSS：

.links {
    color: #383838;
}

または、他のテキストもあり、ブロック全体を折り返すことができない場合は、個々の文字を折り返します。

<a href="LINK HERE">Home</a> <span class="separator">|</span> <a href="LINK HERE">Page 1</a>
于 2013-03-16T08:14:04.590 に答える
0

li要素を与えborder-right:1px solid blackてから最後のliの子に：

li:last-child{border-right:none;}

IE8との互換性については、selectivizrを確認してください

selectivizrをダウンロードしてプロジェクトに含め、このコードをヘッドタグに含めます

<script type="text/javascript" src="[JS library]"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
   <script type="text/javascript" src="selectivizr.js"></script>
   <noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->
于 2013-03-16T08:09:05.917 に答える