html - 带有文本的 Div线

Question

我怎样才能做到这一点<hr>？带有内容的 div 将结束<hr>。怎么做？

这是我的 jsfiddle：http: //jsfiddle.net/fnaYs/。我不知道如何将此文本放入图像框中。有什么解决办法吗？

之后，我想将此布局添加到 wordpress，所以我想将文本放入<div>或其他元素中，而不是在 css 文件中。

Answer 1

当您将position变量的属性设置为 时relative，它基本上意味着元素的位置是相对于浏览器的。

所以当你说top:-5px;这意味着你要求浏览器将你的元素放在它实际应该在的位置上方 5 个像素处。

您所要做的就是在 CSS 中将 div 的 top 属性设置为某个负值。像这样：

<hr />
<div style="position:relative;top:-5px;">DIV CONTENT</div>

替换为-5px您的要求...

Answer 2

我已经编写了一个解决方案（可能还有其他方法）。

这是一个有效的 JSFiddle：http: //jsfiddle.net/fnaYs/6/

CSS

hr.line {
    padding: 0;
    border: 1px solid;
    color: #333;
    text-align: center;
}

.box {
    background-color:teal;
    width:100px;
    height:30px;
    position:absolute;
    left: 40%;
    bottom:90%;
    padding-top:20px;

}

HTML

<hr class="line"/>
<div class="box"> Text </div>

Answer 3

这是您需要的工作 jsFiddle：http: //jsfiddle.net/2LaLb/

<hr class="line" /> <div class="mydiv">Div with text</div>

相应的 CSS 将是：

    hr.line {
    padding: 0;
    border: 1px solid;
    color: #333;
    text-align: center;
}

    .mydiv {
background:red;
    border:1px solid red;
    width:100px;
    position:absolute;
    top:0;left:400px;
}

如您所见，它会产生您想要的结果。