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 を使用して、それらを 1 行に配置しています。

.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

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 に答える
0

.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

于 2013-06-20T09:46:20.027 に答える