Question

我有一个div，我需要在hr结束。{/ p>

div {
    border-top: 1px solid;
    border-left: 1px solid;
    border-right: 1px solid;
    min-height: 100px;
}

<div> this is a test <hr> </div>

正如您在上面提到的那样，hr在文本下面，但我需要在div（类似div{border-bottom: 1px solid}）之类的内容中设置它。

注意：我无法将margin-top用于hr。因为有时会有很多文本进入div，在这种情况下，hr和文本之间会有一个空格。我只想在有一两行文字时将其保留在div的底部。

嗯，我怎么能这样做？

Answer 1

您可以使用位置相对+绝对值。

div {
  border-top: 1px solid;
  border-left: 1px solid;
  border-right: 1px solid;
  min-height: 100px;
  position: relative;
}
div hr {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  margin: 0;
}

<div>this is a test<hr></div>

<强>更新

伪方法（如评论）。

div {
  position: relative;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  min-height: 100px;
}
div:after {
  content: "";
  position: absolute;
  left: 0;
  right: 20px; /*0 without gap*/
  bottom: 0;
  border-bottom: 1px solid;
}

<div>this is a test</div>

Answer 2

您需要将hr绝对定位到div的底部，并确保div使用相对定位。

div {
position: relative;
}

div hr {
position: absolute;
bottom: 0;
left: 0;
/* additional style declarations here such as width */
}

Answer 3

添加嵌套元素并将min-height移至其中。

CSS：

.example > DIV {
    min-height: 100px;
}

HTML：

<div class="example">
    <div>this is a test</div>
    <hr />
</div>

Answer 4

<hr>标签不支持固定位置，可以使用绝对和相对。
同时，您可以实现与postion:fixed类似的功能：

.horizontalLine{
        /* position:fixed; */
        position: absolute; 
        position: relative;
        border: none; 
        border-bottom: 1px solid gainsboro;
    }

Answer 5

不使用hr标签而是使用它这应该会更好。

div {
  border: 1px solid black;
  }
p {
  /*If the border isnt close enough you can also use line height*/
  border-bottom: 3px solid black;
  }

<div>
   <p>Some text</p>
 </div>

如何在元素的底部保留<hr />？

5 个答案: