0

这是一张图片，显示了我想要实现的目标。

在此处输入图像描述

因此，任何给定文本（通常是某种标题标签）左右两侧的一行，在文本的每一侧都延伸了一定的距离（在本例中为 65 像素）。

我需要与文本本身相关的流动性...整体宽度无法固定。

4

4 回答 4

1

你可以用不同的方式来做。一种方法是在将文本保留在标题标签或带有字体设置的 div 中之后，在文本周围设置边框。请参阅以下链接中的建议：

将居中文本添加到类似 <hr/> 的行的中间

于 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;

}

jsFiddle

于 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 回答