这是一张图片，显示了我想要实现的目标。
因此，任何给定文本（通常是某种标题标签）左右两侧的一行，在文本的每一侧都延伸了一定的距离（在本例中为 65 像素）。
我需要与文本本身相关的流动性...整体宽度无法固定。
问问题
513 次
4 回答
1
你可以用不同的方式来做。一种方法是在将文本保留在标题标签或带有字体设置的 div 中之后，在文本周围设置边框。请参阅以下链接中的建议：
于 2012-10-29T20:00:00.517 回答
1
这个解决方案是过去最适合我的解决方案，您可以在此处查看示例。该代码使用 ::before 和 ::after 伪类来创建行，然后将 display:table 应用于文本，以便框适应它的内容（我使用 h2 作为示例）这种类型的设计通常是居中的我添加了边距：1em auto;
这样做，您不需要添加任何额外的 html。希望能帮助到你。
h2{
display:table;
margin: 1em auto;
}
h2:before, h2:after{
content:"";
display: block;
border-top: 1px solid #ccc;
width: 65px;
margin-top:.5em;
}
h2:before{
float: left;
margin-right:3px;
}
h2:after{
float:right;
margin-left:3px;
}
于 2012-10-30T18:21:11.630 回答
0
你的html代码
<fieldset class="title">
<legend>Some text</legend>
</fieldset>
你的CSS代码
fieldset.title {
border-top: 1px solid #aaa;
border-bottom: none;
border-left: none;
border-right: none;
display: block;
text-align: center;
}
fieldset {
width: 50%;
}
fieldset.title legend {
padding: 5px 10px;
}
于 2012-10-29T19:48:28.210 回答
0
试试这个：演示
<html>
<head>
<style type="text/css">
.striked-text {
position: relative;
}
.striked-text .text {
z-index: 10;
position: relative;
background-color: white;
padding: 0 5px;
}
.striked-text .line {
left: -65px;
padding: 0 65px;
border-top: 1px solid gray;
top: 0.7em;
display: block;
position: absolute;
width: 100%;
z-index: 1;
}
</style>
</head>
<body>
<div style="text-align:center;">
<span class="striked-text"><span class="text">FAQ</span><span class="line"></span></span>
</div>
</body>
</html>
对于标题，您需要定义容器的宽度
于 2012-10-29T20:03:12.037 回答