Question

CSS中的

，我该怎么做：

---Item---

将短划线连接成一条线？

我想到了：

border-bottom: 3px solid #000;

但是我不能向上移动该行加上该行将在文本后面，而不是围绕文本

我的HTML

<ul>
    <li class="sub-menu-item" ><a href="#">FACULTY&STAFF</a></li>
</ul>

（如果可能的话，我想避免触及HTML）

以上所有可能通过css或我应该只使用图像吗？

我的目标是ie8及以上（当然还有所有新的浏览器）

Answer 1

使用CSS —和:before选择器在您的内容之前和之后注入:after。您需要使用转义的unicode，如discussed here：

li.sub-menu-item:before,  li.sub-menu-item:after {
    content: "\2014"
}

见JSFiddle。对于较短的行，您可以使用ndash。

Answer 2

这是一个开始：

.sub-menu-item
{
    border-bottom:1px solid black;
    height:0.6em;
    width:200px;
    text-align:center;
    margin-bottom:1em;

}
.sub-menu-item > a
{
    text-decoration:none;
    background:white;
}

http://jsfiddle.net/NpP5F/3/ （已更新以使用多个项目）

经测试可在Firefox，IE和Chrome中使用。现在请记住，这是孤立的小提琴。可能需要一些调整才能让它在其他html元素和样式等中工作。无论如何，概念证明。它“可以”完成。

Answer 3

您可以使用border-top和border-bottom创建一个div，line-height：0，其中包含一个具有已定义背景颜色的span：

<div class="test">
   <span>BLA BLA BLA </span>
</div>

CSS：

.test {
border-bottom: 1px solid #D7D7D7;
border-top: 1px solid #A1A1A1;
line-height: 0;
text-align: center; }

.test span { 
background-color: #BABABA;
padding: 0 10px; }

Answer 4

理论上你可以使用<hr/>然后设置它的长度并强制它显示为内联。或者，如果您的编码支持，请使用一些特殊的unicode字符。

Answer 5

试试这个。 :)它使用一个图像，这是一个加号，因为它允许你按照你想要的样式设置破折号，并且不处理任何怪异的边距或任何可能弄乱你的其余布局的东西。

li.sub-menu-item
{
    background-image: url('http://i.imgur.com/JIa6C.png'); /* Just a transparent PNG with a line in the middle */
}

li.sub-menu-item a
{
    background-color: #FFF;
    padding: 0 10px;
    margin-left: 200px /* So you can see the left side of the line too */
}

http://jsfiddle.net/wAb8C

Answer 6

不改变代码：

ul li{
position: relative;
border-bottom: 1px solid #000;
}

ul li a{

position: relative;
background: #fff;
left: 0;
bottom: -10px;
margin-left: 10px;
color: orange;
text-decoration: none;
}

Example here

css中的行之间的文本

6 个答案: