在中间垂直添加一条线

Question

我想在标题的中间垂直添加一行，而在右侧，我想添加另一个div。我可以在标题的中间设置线条，但是当我为右边距添加样式时，线条不再位于中间。

编辑：问题出在Firefox上。它在Chrome上运行良好。

请参阅附图：

以下是我正在尝试的内容：

HTML：

<div class="box"> 
    <h2><span class="text">Hello world</span><span class="right"></span></h2>
</div>

CSS：

h2 {   
   border-bottom: 1px solid #000; 
    line-height: 0.1em; 
    margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
}

span.right{
    background: green;
    width: 30px;
    height: 30px;
    display: block;
    float: right;
    margin-top: -5px;
}

演示： http://jsfiddle.net/RecUE/

Answer 1

您的问题是浮动，请查看此更新的demo。

.box{
    width: 500px;
    margin-top: 30px;
}

h2 .text {
    background-color:white;
    height: 10px; 
}

h2 {   
   border-bottom: 1px solid #000; 
    line-height: 0; 
    margin: 10px 0 20px; 
} 

h2 span { 
    background:#fff; 
    padding:0 10px; 
    float:left; 
}

span.right{
    background: green;
    width: 30px;
    height: 30px;
    display: inline-block;
    float: right;
    margin-top: -15px;
}

DEMO

Answer 2

尝试this fiddle，我已经编辑了你的html和css

.line {
    float:left;
    min-width:400px;
    border-bottom:1px solid black;
    height: 10px;
}

Answer 3

检查这个小提琴

http://jsfiddle.net/RecUE/8/

.box{
    width: 500px;
    margin-top: 30px;
}


.text { 
    background:#fff; 
    float:left;
    padding:0 10px; 
}

.line {
    float:left;
    min-width:400px;
    border-bottom:1px solid black;
    height: 10px;

}
.right{
    background: green;
    width: 30px;
    height: 30px;
    display: inline-block;
    float: right;
    margin-top: -5px;
}

Answer 4

试试这个：

span.right{
    background: green;
    width: 30px;
    height: 30px;
    display: block;
    float: right;
    margin-top: -15px;
}
.text{
    float: left;
    display: block;
    height: 30px;
}

demo