如何设置垂直条的样式即"|"？

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

您不应该使用pipe(|)作为分隔符,而是使用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;
}

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

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

Answer 3

|是一个字符,因此,采用您可能应用于文本的任何样式.我得到的印象是,你可能会尝试|用来构建一个盒子边框.如果是这种情况,那么将块级元素设置为具有尝试使用字符的边框会更好.