html - 在中间垂直添加一条线

Question

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

编辑：问题出在火狐上。它在 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

您的问题与浮动有关，请查看此更新的演示。

.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;
}

演示

Answer 2

检查这个小提琴

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 3

试试这个小提琴，我已经编辑了你的 html 和 css

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

Answer 4

尝试这个：

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

演示