是否有一个内联元素添加文本，所以没有换行符？

Question

我问这个的原因是因为我的网站上有链接，当它们悬停时会加粗，它们是＆＃34;我们的工作|联系我们＆＃34;，但问题是＆＃34; |＆＃34;是其中一个链接的一部分，因此它也是粗体，无论如何都在这周围？

Answer 1

你可以用css和边框（这是正确的方式，而不是管道标志）来做到这一点

<a> text </a>
<a> text </a>
<a> text </a>
<a> text </a>

a{
    margin: 0 5px;
    padding: 0 5px;
    line-height: 20px; /* this is to center it with the text */
}
a+a{
    border-left: 1px solid #000;
    padding-left: 10px;
}

jsFiddle demo

Answer 2

使用style =＆＃34; white-space：nowrap;＆＃34;对于有文字的容器，以避免换行。

Answer 3

我认为你正在寻找这种结构

<强> HTML

<ul>
    <li><a href="#"> Our work </a></li>
    <li> | </li>
    <li><a href="#"> contact us </a></li>
</ul>

<强> CSS

ul{
    list-style:none;
}
ul > li{
    float:left;
    padding: 5px;
}

DEMO

修改

没有硬编码管道

<ul>
    <li><a href="#"> Our work </a></li>
    <li><a href="#"> Contact us </a></li>
    <li><a href="#"> About us </a></li>
</ul>


ul{
    list-style:none;
}

ul > li{
    float:left;
}

ul > li a{
    padding:5px;
}

li + li::before {
    content: "|";
}

DEMO