如何使用 CSS 使 HTML 元素出现在垂直线上？

Question

问题图片：

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

Answer 1

您可以使用 table:

<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>

或浮动divs:

<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

虽然我同意这可以是 table，但您可以使用浮点数轻松做到这一点。

.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>

您所做的只是使 header 值向左浮动，清除确保它从新行开始。

如何使用 CSS 使 HTML 元素出现在垂直线上？

How do you make HTML elements appear on a vertical line using CSS?

html

css