css space 连续输出文本，但与每个 other/keep 保持对齐？

Question

我有以下行包含我的 mysql 结果，如下所示：

<div class="request"><p><?php echo $row['data1']; ?></p><p><?php echo $row['data2']; ?></p><p><?php echo $row['data3']; ?></p><p><?php echo $row['data4']; ?></p></div>


<div class="request"><p><?php echo $row['data4']; ?></p><p><?php echo $row['data2']; ?></p><p><?php echo $row['data1']; ?></p><p><?php echo $row['data3']; ?></p></div>

看起来像这样：

Bank Details            A/C: 1234567        S/C: 01-00-01     Tuesday 2nd Feb
Invoice Details            Ref: 12322323        Pending     Friday 12th Feb

我的问题是每一行每次都会包含不同的值，如上所示。一些行将显示银行详细信息，如帐号和排序代码，其他行将包含发票详细信息，如参考号和状态。

行以一种不匹配的方式显示，文本到处都是。我的问题是如何让文本向左对齐，这样它既美观又整洁：

Bank Details            A/C: 1234567        S/C: 01-00-01     Tuesday 2nd Feb
Invoice Details         Ref: 12322323       Pending           Friday 12th Feb

这是我的 css:

.request{
    height:20px;
    padding-top:8px;
    padding-bottom:15px;
    width:100%;
    border-bottom:1px solid #ccc;
    cursor:pointer;
    cursor:hand;
    position:relative;
    float:left;
    text-align:left;
}

.request p{
text-align:left;
display:inline-block;
width:auto;
height:100%;
overflow:hidden;
position:relative;
margin-right:17%;
float:left;
}

有人可以告诉我哪里出错了吗？谢谢

Answer 1

这看起来像表格数据，因此您应该像这样使用 table：

<table cellspacing="16px">
    <tr>
        <td>Bank Details</td>
        <td>A/C: 1234567</td>
        <td>S/C: 01-00-01</td>
        <td>Tuesday 2nd Feb</td>
    </tr>
    <tr>
        <td>Invoice Details</td>
        <td>Ref: 12322323</td>
        <td>Pending</td>
        <td>Friday 12th Feb</td>
    </tr>
</table>

http://jsfiddle.net/13kz5sjq/

css space 连续输出文本，但与每个 other/keep 保持对齐？

css space out text in a row but keep in alignment with each other/keep left?

css

text