如何使用按钮绘制线条中心的线条

Question

我想在CSS中绘制一条<hr>行。并且在线的中心有一个按钮，在中间切割该线。那么我怎么能在css中实现这个效果呢？

Answer 1

将margin-bottom减去button。写得像这样：

button{
 margin-bottom:-20px;
 position:relative;
} 

Answer 2

CSS

.button-holder{display:block; height:30px; border-bottom:1px solid #ff0000; position:relative; text-align:center;}
input{position:absolute; bottom:-13px;}

HTML

<div class="button-holder">
    <input type="button" value="button in the middle of HR" />
</div>