9

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

这就是我想要做的。

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

4 回答 4

17

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

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

例如，在您的样式表中：

.bar { font-size: 20px; }
于 2012-05-14T13:10:48.670 回答
16

您不应该使用管道 ( |) 作为分隔符，而是使用 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。 这是一个正在运行的示例（更新）。 这是一些关于边框样式的文档。

第二条规则: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;
}

您可以使用 aul标记链接列表以获得更好的语义。您必须添加inline-block才能将它们放在一行li上，默认情况下是块级元素。

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

于 2012-05-14T13:25:55.423 回答
7

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

于 2012-05-14T13:13:03.430 回答
1

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

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

编辑，回应：

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

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

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">...

图像技术：

您还可以使用图像（不太优雅，不会详细说明）。

兄弟选择器技术 - （现场演示）：

您还可以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>
</???>

您可能可以在此 google 搜索中找到更多示例：http: //meyerweb.com/eric/articles/webrev/200007a.html

于 2012-05-14T13:10:19.720 回答