Question

我的文档中有以下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;
}

这将在vline元素的左右两侧产生5px的余量。

JSFiddle

Answer 3

Updated Fiddle

只要一行中总共有四个项目，您就可以使用＆＃34;固定＆＃34;百分比值：

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

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

重要的部分是width

中的text-align和.bill-header-info属性

Answer 4

Updated Fiddle

只要一行中总共有四个项目，您就可以使用＆＃34;固定＆＃34;百分比值：

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

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

重要的部分是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;

}

如何以相同的间距内联div

5 个答案: