Question

我正在使用其中一些＆＃34; |＆＃34;分离我编码的网站上的不同链接，因为它分隔了彼此相邻的链接。是否有一大堆代码我可以直接添加到CSS中来执行此操作？

＆＃34;颜色全部| ＃383838＆＃34;

以下是我使用HTML做的一个例子：

^我没有使用真正的链接，但这就是它在我的网站上显示的方式。（虽然不是那些颜色）....这里是我用来做这个的代码。

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

问题：在我的页面上，所有文字和链接都是一种颜色。拥有＆＃34; |＆＃34;在HTML的代码中，它会自动转换＆＃34; |＆＃34;所有其他文字和链接的颜色。我可以在CSS中添加一些东西来制作每一个＆＃34; |＆＃34;另一种颜色？

Juhana的解决方案最终解决了问题。但是，当我用＆lt;包装它时p> ＆LT; / p＆gt; ....它再次变回相同的颜色......我必须把它包裹在＆lt; p> ＆LT; / p＆gt;或者它直接位于版权页脚的顶部...任何有关如何创建空间的想法，以便它们彼此叠加而没有空间（无需添加＆lt; p＆gt;＆lt; / p＆gt; ）？

结束找到我自己的解决方案，使用：＆lt; br /＆gt;

感谢所有帮助过的人。

Answer 1

您可以将此css：border-right :solid 1px #000000;应用于锚链接周围的标记。

Answer 2

使用无序列表放置链接，然后添加|那样：

li:after {
    content: '|';
}

Answer 3

MarcinJuraszek非常正确，我会这样做。但我还要补充一下：

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

删除最后一个链接后的行

Answer 4

无法在其他未标记的文本中设置单个字符的样式。如果|字符是链接组中唯一的非链接文本，请将其包装在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>

Answer 5

将li个元素border-right:1px solid black提供给最后一个li子级：

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

对于IE8兼容性，请检查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]-->

关于HTML - 使用“|”

5 个答案: