CSS 如何设置竖线的样式，即“|”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10583971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style the vertical bar i.e. "|"?
提问by ashishjmeshram
How do I style the vertical bar i.e. "|"? I need to vary the width and the height of the "|".
如何设置垂直条的样式，即“|”？我需要改变“|”的宽度和高度。
This is what I am trying to do.
这就是我想要做的。
<a href="link1"> Link 1 </a> | <a href="link2"> Link 2 </a>
回答by Guffa
Put it in an element, and style the element:
把它放在一个元素中，并设置元素的样式：
<span class="bar">|</span>
In your style sheet, for example:
例如，在您的样式表中：
.bar { font-size: 20px; }
回答by Joe Flynn
You shouldn't be using the pipe (|) as a separator, use css instead.
您不应该使用管道 ( |) 作为分隔符，而应使用 css。
Say the anchors were in a div, with id equal to breadcrumbs, like this:
假设锚点在一个 div 中，id 等于breadcrumbs，如下所示：
<div id="breadcrumbs">
<a href="#">One</a>
<a href="#">Two</a>
<a href="#">Three</a>
</div>?
You could then add separators between them with a couple css rules, like this:
然后，您可以使用几个 css 规则在它们之间添加分隔符，如下所示：
#breadcrumbs a {
padding: 0.5em;
border-right: 5px solid green;
}
#breadcrumbs a:last-child {
border-right: none;
}?
You could vary the size, style and color of the separator with the border-right: 5px solid greenrule. Here's an example(updated) in action. Here's some documentationon border styling.
您可以使用规则更改分隔符的大小、样式和颜色border-right: 5px solid green。 这是一个正在运行的示例（更新）。 这是有关边框样式的一些文档。
The second rule with :last-childprevents an extra separator after the last element.
第二条规则 with:last-child防止在最后一个元素之后出现额外的分隔符。
To vary the height of the separator, you would change the paddingon the first rule.
要改变分隔符的高度，您需要更改padding第一条规则。
By popular demand, a list version:
根据大众需求，列表版本：
If you put the links in a list:
如果您将链接放在列表中：
<ul id="breadcrumb-list">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>?
And use rules like this:
并使用这样的规则：
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;
}
You can use a ulto markup your list of links for better semantics. You have to add the inline-blockto put them on one line, liis by default a block level element.
您可以使用 aul来标记您的链接列表以获得更好的语义。您必须添加inline-block以将它们放在一行上，li默认情况下是块级元素。
I've also shown a different style you can achieve by varying the padding and border rules.
我还展示了一种不同的样式，您可以通过改变填充和边框规则来实现。
回答by dnagirl
|is a character, and as such, takes any stylings that you might apply to text. I get the impression though, that you might be trying to use |to construct a box border. If that is the case, you're much better off styling a block level element to have a border that attempting to use characters.
|是一个字符，因此可以采用您可能应用于文本的任何样式。不过，我的印象是，您可能正在尝试使用|来构建框边框。如果是这种情况，最好将块级元素的样式设置为具有尝试使用字符的边框。
回答by ninjagecko
You can't really style individual characters easily with css, unless that's the only character in your element. If it's in a textarea you have no hope. If it isn't, you have hope: you have to manually augment it with <span class="specialBar">...</span>tags whenever it occurs in the text you want to style it in.
您无法真正使用 css 轻松设置单个字符的样式，除非这是您元素中的唯一字符。如果它在 textarea 中，你就没有希望了。如果不是，您就有希望：<span class="specialBar">...</span>只要它出现在您想要设置样式的文本中，您就必须手动添加标签。
You can also just use another unicode vertical-bar character which is more to your liking.
您也可以使用另一个更符合您喜好的 unicode 竖线字符。
edit, In response to:
"I basically wanted a seprator between links. Am i going in the wrong direction? – original poster"
编辑，回应：
“我基本上想要一个链接之间的分隔符。我是不是走错了方向？-原始海报”
Ideally you would use spans, which you can shape with CSS to emulate a thin vertical line:
理想情况下，您将使用跨度，您可以使用 CSS 对其进行整形以模拟一条细的垂直线：
emulate-with-a-span technique - (live demo):
emulate-with-a-span 技术 -（现场演示）：
.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">...
images technique:
图像技术：
You could also use images (less elegant, won't go into detail).
您还可以使用图像（不太优雅，不会详细介绍）。
sibling selector technique - (live demo):
兄弟选择器技术 - （现场演示）：
You can also set the border-lefton all links which aren't the first. According to the w3c spec on CSS2 adjacency selectors, "E + FMatches any F element immediately preceded by a sibling element E." Therefore:
您还可以border-left在不是第一个的所有链接上设置。根据关于CSS2 邻接选择器的 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>
</???>
You might be able to find more examples at this google hit: http://meyerweb.com/eric/articles/webrev/200007a.html
您可以在此 google 搜索中找到更多示例：http: //meyerweb.com/eric/articles/webrev/200007a.html
