Question

问题图片：

enter image description here

如何使用CSS从左边的那个到右边的那个？

Answer 1

您可以使用表格：

<table>
    <tr>
        <td>You own</td>
        <td>20</td>
    </tr>
    <tr>
        <td>Price</td>
        <td>20</td>
   </tr>
    <tr>
        <td>BPS</td>
        <td>0.50</td>
   </tr>
</table>

或浮动div s：

<div style="display:inline-block;">
    <div style="float:left; width:150px;">You own</div>
    <div style="float:left;">20</div>
</div>

<div style="display:inline-block;">
    <div style="float:left; width:150px;">Price</div>
    <div style="float:left;">20</div>
</div>

<div style="display:inline-block;">
    <div style="float:left; width:150px;">BPS</div>
    <div style="float:left;">0.50</div>
</div>

Answer 2

<div>
    <div id="left"> <!-- float left -->
        <p>You Own></p>
        <p>Price</p>
        <p>BPS</p>
    </div>

    <div id="right"> 
        <p>20</p>
        <p>20</p>
        <p>0.50</p>

    </div>
</div>

Answer 3

两个div

<div class="box">
 Your own:<br />
 Price:<br />
 PBS
</div>

<div class="box">
 20<br />
 20<br />
 50
</div>

CSS

.box {
 float:left;
 padding-right:40px;
}

Answer 4

虽然我同意这可以是一张桌子，但您可以轻松地使用花车进行此操作。

.container {
    padding: 0.5em;
    width: 200px;
    background: #333;
    color: #fff;
}

.button {
    background: #efefef;
    padding: 5px;
    color: #000;
    margin-bottom: 0.5em;
}

.item-header {
    font-weight:bold;
    float:left;
    width: 45%;
    clear:both;
}

<div class="container">
    <div class="button">Buy Foreign Worker</div>
    <div class="items">
        <div class="item-header">You Own:</div>
        <div class="item-value">20</div>
        <div class="item-header">Price:</div>
        <div class="item-value">20</div>
        <div class="item-header">BPS:</div>
        <div class="item-value">0.5</div>
    </div>
</div>

您所做的只是使标题值向左浮动，而清除确保它在新行上开始。

如何使用CSS使HTML元素显示在垂直线上？

4 个答案: