Question

我想在hr标签的不同侧面有不同的背景。

示例（其中'---'表示hr标记输出） -

background1
---------------------------------------------------------------------------------
background2

如何在不使用表的情况下实现？

Answer 1

<div style='background-color: blue'>Some stuff</div>

<hr>

<div style='background-color: red'>Some other stuff</div>

就这么简单！
Background CSS specifications

现在，您可能想知道边距...只需将hr边距设置为零！查看this JSFiddle

Answer 2

你可以制作一些css并像这样做

    p.separator {
    height: 0;
    width: 100%;
    border: 0;
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

但诚实地说，如果没有任何代码，很难说出你想要的东西。

Answer 3

前后做一个div。将背景颜色放在这些div上。

在这些div中，您只需设置宽度样式。

如果你想要一些例子：

<div style="background-color:red; width:20px; height:20px">
</div>
<hr style="width:200px;" />
<div style="background-color:blue; width:20px; height:20px">
</div>

Answer 4

您应该使用<div>来实现此目的，不需要<hr>，因为可以使用CSS。

<强> HTML

<div class="top">example</div>
<div>example</div>

<强> CSS

div {
    height: 50px;
    background: blue;
}
div.top {
    background: red;
    border-bottom: 1px dashed #000;
}

<强> JsFiddle

如何在<hr />标记的不同侧面具有不同的背景

4 个答案: