css中行之间的文本[重复]答案

【问题标题】：text between lines in css [duplicate]css中行之间的文本[重复]
【发布时间】：2012-07-06 00:47:54
【问题描述】：

在 CSS 中，我该怎么做：

---Item---

破折号像线一样连接？

我想到了：

border-bottom: 3px solid #000;

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

我的 HTML

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

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

以上都可以通过 css 实现还是我应该只使用图片？

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

【问题讨论】：

您打算支持哪些浏览器？
适用于 IE:ie8+ 和所有主流浏览器
我不确定，因为我还没有尝试过，但您能否在周围的字符上使用删除线。但是，您需要修改 html，我知道这是您不喜欢做的事情。
你想要单词左边多少个破折号，右边多少个？如果您每边都需要 3 个，那么考虑一下：jsfiddle.net/bbjXP
我不想要破折号，我想要文本周围扭曲的线条

标签： html css

【解决方案1】：

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

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

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

【讨论】：

我比我更喜欢你的回答。简单得多，并且不需要文本上的背景颜色。 +1

【解决方案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 元素和样式等中工作。无论如何，概念证明。它“可以”完成。

【讨论】：

添加多个 li 项时会中断。
@menislici 感谢您注意到这一点。通过添加边距修复。
“.sub-menu-item > a”有什么作用？我对 CSS 还是有点陌生...
我投了反对票，因为这不是应该使用的解决方案。我们不需要概念证明，因为我们都知道它可以做到:)。
@Tom91136 .sub-menu-item > a 只是引用<a> 标记，它是.sub-menu-item 类的直接子（直接嵌套在）。它基本上只是确保只有直接在列表项中找到的超链接才会受到样式的影响。希望这可以帮助。通常，> 仅表示直接孩子。在此示例中如果没有它，.sub-menu-item a 将引用位于 .sub-menu-item 下某处的任何 a 标记。

【解决方案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; }

【讨论】：

【解决方案4】：

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

【讨论】：

内嵌显示？像 display:inline-block ？为什么？

【解决方案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

【讨论】：

这不是一个真正的答案，因为 OP 说他知道如何用图像解决它。

【解决方案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

【讨论】：

而-10px 是神奇的数字吗？ -1 来自我。
为什么选择-10px？字体大了怎么办？
好吧，我猜@Tom91136 不仅仅是复制和粘贴它而不适合它自己的需要。此外，他只是表示他想知道是否有可能做这样的事情。最重要的是，如您所见，文本具有通用颜色和字体，因此显然需要修复，但由于他没有为我们提供适当样式的链接，我认为他会这样做当他上线时。
懒人的共同说法（有时也包括我，幸好总有人告诫我）。
你知道吗，你是对的。但是我在任何地方都看不到您对问题的回答。 “懒人的通病”——幸好确实有人警告过你！