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

Question

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

css将创建一个宽度为100px，高度为100px的框。
如何绘制以坐标（0,50）开头的hr线，以div.test中的坐标（100,50）结尾？

Answer 1

如何绘制，其与坐标（0,50）开始一个小时线，在与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; 
}