如何定位與相同的間距

Question

div的直列我已經在我的文檔中的下列的div：

<div class="bill-header"> 
    <div class="bill-header-info"><span>Bill No</span></div> 
    <div class="vline"></div> 
    <div class="bill-header-info"><span>Table No</span></div> 
    <div class="vline"></div> 
    <div class="bill-header-info"><span>Room No</span></div> 
    <div class="vline"></div> 
    <div class="bill-header-info"><span>Amount</span></div> 
</div> 

我用下面的CSS讓他們坐在同一行：

.bill-header { 
    height: 30px; 
    background-color: darkgrey; 
    padding-left: 10px; 
} 

.bill-header-info { 
    float: left; 
    padding-left: 4px; 
    padding-top: 5px; 
    padding-right: 3px; 
} 

.vline { 
    width: 2px; 
    height: 80%; 
    display: block; 
    float: left; 
    margin-top: 3px; 
    border-left: 1px solid gray; 
} 

我如何讓它們在它們之間以相同的距離出現？

Fiddle

Answer 1

你的意思是這樣嗎？ http://jsfiddle.net/3Zv2y/2/

進行這些更改：

.bill-header-info { 
    width:23%; 
    text-align:center; 
} 

Answer 2

在.vline添加margin: 0 5px：

.vline { 
    width: 2px; 
    height: 80%; 
    display: block; 
    float: left; 
    margin-top: 3px; 
    border-left: 1px solid gray; 
    margin:0 5px; 
} 

這將使在左，你的V線元素的權5px的保證金。

JSFiddle

Answer 3

使用width屬性在CSS的exapmle

.bill-header-info {width:22%;} 

Answer 4

Updated Fiddle

只要總有一排四個項目，您可以使用 「固定」 的百分比值：

.bill-header { 
    height: 30px; 
    width: 100%; 
    background-color: darkgrey; 
} 

.bill-header-info { 
    float: left; 
    width: 24.6%; 
    text-align: center; 
    padding-top: 5px; 
} 

The importa nt部分是width和text-align屬性.bill-header-info

Answer 5

.bill-header-info { 
text-align:center; 
width:23%; 
float: left; 
padding-left: 4px; 
padding-top: 5px; 
padding-right: 3px; 

}

.vline { 
width: 2px; 
height: 80%; 
display: block; 
float: left; 
margin-top:3px; 
margin: 0 5 3 3px; 
border-left: 1px solid gray; 

}