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

Posted 2023-04-13

【中文标题】如何设置垂直条的样式，即“|”？

【英文标题】：How to style the vertical bar i.e. "|"?

【发布时间】：2012-05-21 23:24:20

【问题描述】：

如何设置竖线的样式，即“|”？我需要改变“|”的宽度和高度。

这就是我想要做的。

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

【问题讨论】：

你想在 CSS 中设置一个字符的样式吗？

@Evan Mulawski。我基本上想要链接之间的分隔符。我走错方向了吗？

您可以使用粗体并增加字体大小，但更好的选择可能是使用右边框或左边框。

@Ashish 请提供您正在尝试执行的代码示例。您可能希望使用填充和边框来代替分隔符。

@Evan Mulawski。请参阅我已更新我的问题。

【参考方案1】：

把它放在一个元素中，并为元素设置样式：

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

在您的样式表中，例如：

.bar  font-size: 20px; 

【参考方案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 默认情况下是块级元素。

我还展示了一种不同的样式，您可以通过改变填充和边框规则来实现。

【讨论】：

然后支持这样做的答案。为什么你更喜欢这种方式？带有“一堆 a”的 div 有什么问题？你同意这比使用管道更好吗？

为了获得最佳可访问性，您应该始终使用一些东西来分隔链接，无论是空格、逗号还是将它们放在列表项中。这样一来，您的标记在其他情况下仍然是可理解的，无论是可访问性技术、RSS 提要还是其他任何内容。

我知道使用li 标记列表在语义上更好。但这满足了他的要求，并且只需要两个简单的选择器和总共三个声明。

@reisio，我添加了一个带有列表的示例。

【参考方案3】：

| 是一个字符，因此，它采用您可能应用于文本的任何样式。不过我得到的印象是，您可能正在尝试使用| 来构建框边框。如果是这种情况，最好将块级元素设置为具有尝试使用字符的边框。

【参考方案4】：

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

您也可以只使用另一个更符合您喜好的 unicode 竖线字符。

---

编辑，回应：

“我基本上想要链接之间的分隔符。我走错方向了吗？-原始海报”

理想情况下，您会使用跨度，您可以使用 CSS 对其进行塑造以模拟细垂直线：

emulate-with-a-span 技术 - (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