2

在 CSS 中，我该怎么做：

---Item---

破折号像线一样连接？

我想到了：

border-bottom: 3px solid #000;

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

我的 HTML

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

（如果可能，我想避免接触 HTML）

以上所有内容都可以通过css实现还是我应该只使用图像？

我的目标是 ie8 及更高版本（当然还有所有新的浏览器）

4

6 回答 6

5

&mdash;使用 CSS:before和选择器在您的内容之前和之后注入:after。您需要使用转义的 unicode，如此处所述：

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

请参阅JSFiddle。对于较短的行，您可以使用 ndash。

于 2012-07-05T15:24:08.700 回答
3

这是一个开始：

.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 元素和样式等中工作。无论如何，概念证明。可以办到。

于 2012-07-05T15:23:20.560 回答
2

您可以创建一个带有border-top 和border-bottom, line-height: 0 的div，其中有一个定义了背景颜色的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; }
于 2013-04-11T14:29:53.060 回答
1

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

于 2012-07-05T15:16:33.120 回答
0

尝试这个。:) 它使用图像，这是一个优点，因为它允许您根据需要设置破折号的样式，并且不会处理任何奇怪的边距或任何可能弄乱其余布局的东西。

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

于 2012-07-05T15:27:46.773 回答
-1

在不更改代码的情况下：

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;
}​

这里的例子

于 2012-07-05T15:24:03.310 回答