Question

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

enter image description here

因此，任何给定文本左侧和右侧的一行（通常是某种标题标记），在文本的每一侧延伸一定距离（在本例中为65px）。

我需要一些与文本本身相关的东西......整体宽度无法修复。

Answer 1

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

Add centered text to the middle of a <hr/>-like line

Answer 2

此解决方案是过去最适合我的解决方案，您可以查看example here。代码使用:: 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;
}

Answer 3

您的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

Answer 4

试试这个：Demo

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

对于标题，您需要定义容器的宽度

创建相对于文本的边框？

4 个答案: