0

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

我怎样才能让它们在它们之间以相同的距离出现？

小提琴

4

5 回答 5

2

你的意思是这样吗？http://jsfiddle.net/3Zv2y/2/

进行以下更改：

.bill-header-info {
    width:23%;
    text-align:center;
}
于 2013-06-20T09:48:40.537 回答
0

例如在css中使用width属性

 .bill-header-info {width:22%;}
于 2013-06-20T09:47:50.947 回答
0

更新小提琴

只要一行中总是有四个项目，您就可以使用“固定”百分比值：

.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

于 2013-06-20T09:48:28.250 回答
0

添加margin: 0 5px您的 .vline：

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

这将在 vline 元素的左右两侧留出 5px 的边距。

JSFiddle

于 2013-06-20T09:46:20.027 回答
0 
.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;

}

于 2013-06-20T09:52:25.663 回答