如何將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; 
}