在中間垂直添加一行

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

試試這個：

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

demo

Answer 3

嘗試this fiddle，我編輯了自己的HTML和CSS

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

Answer 4

檢查此琴

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