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 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连续排出文本但保持对齐/保持左边？

1 个答案: