如何将hr行放在div中的指定位置？

Question

div.test{width:100px;height:100px;border:1px solid red;}

css将创建一个宽100像素，高100像素的盒子 如何绘制以坐标（0,50）开头的hr行，以div.test中的坐标（100,50）结束？

Answer 1

  

如何绘制以坐标（0,50）开头的hr行，以div.test中的坐标（100,50）结束？

使用伪元素绘制相对于父级绝对定位的水平线。

div.test {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  position: relative;
}

.test::after {
  content: '';
  border: 1px solid black;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}

<div class="test"></div>

Answer 2

相应地定位<hr>。

div.test{width:100px;height:100px;border:1px solid red;}
hr {
  position: relative;
  z-index: -1;
  margin-top: -50px;
  width: 100px;
  margin-left: 0px;
}

<div class="test"></div>
<hr>

Answer 3

如果你给你的小时数提供50％的保证金最终怎么办？

CSS

#line{
    margin-top:50%;
}

HTML

<hr id="line" />

Answer 4

hr {
  margin-top: -50px;
  width: 100px;
  margin-left: 0px;
}