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。

假设锚点位于div中，id等于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规则更改分隔符的大小，样式和颜色。 Here's an example（已更新）正在行动中。关于边框造型的Here's some documentation。

: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默认为块级元素。

我还通过改变填充和边框规则，展示了一种不同的风格。

Answer 3

|是一个字符，因此可以采用您可能应用于文本的任何样式。我得到的印象是，您可能正在尝试使用|来构建框边框。如果是这种情况，那么设置块级元素的样式会更好，以便有一个试图使用字符的边框。

Answer 4

您无法使用css轻松设置单个字符的样式，除非它是元素中唯一的字符。如果它在textarea中你没有希望。如果不是，那么您有希望：只要在要为其设置样式的文本中出现<span class="specialBar">...</span>标记，就必须手动对其进行扩充。

你也可以使用另一个更符合自己喜欢的unicode竖线字符。

编辑，以回复：

＆＃34;我基本上想要一个链接之间的分隔符。我走错了方向吗？ - 原创海报＆＃34;

理想情况下，您可以使用跨度，您可以使用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。根据{{3}}上的w3c规范，＆＃34; E + F匹配任何紧接在兄弟元素E前面的F元素。＆＃34;因此：

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

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

您可以在此google点击中找到更多示例：CSS2 adjacency selectors

如何设置垂直条的样式，即“|”？

4 个答案: