-3

如果可能的话，是否可以在一行中水平对齐 HTML 元素，例如使用我的代码：

<html>
    <head>
    <title>Invoice</Title>
        <body>
            <header>
            <h1>Cafe au Lait Invoice</h1>
            <h2><?php echo $address;  ?></h2>
            <h3>Ph: <?php echo $phone_no;?></h3>
            <h4>Date: <?php echo "$date at $time";?>
            </header>
        Coffee Ordered: 
            <?php 
                if ($cappuccino > 0)
                {
                    Print "<p>Cappuccino ";
                }
                if ($espresso > 0)
                {
                    Print "<p>Espresso ";
                }
                if ($double > 0)
                {
                    Print "<p>Double Espresso";
                }
                if ($latte > 0)
                {
                    Print "<p>Latte ";
                }
                if ($flat > 0)
                {
                    Print "<p>Flat White";
                }
                if ($ice > 0)
                {
                    Print "<p>Ice Coffee";
                }
            ?>  
            Qty: 
            <?php 
                if ($cappuccino > 0)
                {
                    Print "<p>$cappuccino_qty ";
                }
                if ($espresso > 0)
                {
                    Print "<p>$espresso_qty ";
                }
                if ($double > 0)
                {
                    Print "<p>$double_espresso_qty";
                }
                if ($latte > 0)
                {
                    Print "<p>$latte_qty ";
                }
                if ($flat > 0)
                {
                    Print "<p>$flat_white_qty";
                }
                if ($ice > 0)
                {
                    Print "<p>$ice_coffee_qty";
                }
            ?>  

        </body> 
    </head>
</Html>

“Coffee Ordered”和“Qty”彼此相邻。我是否必须重写代码才能这样做？我的想法类似于这个模板，http://www.docstoc.com/docs/46248123/Pizza-Hut-Price-List，其中“Pizza Hutt ...”是“Coffee Ordered”，“Item”是“Qty” ”。

4

1 回答 1

4

在 html 中创建一个带有不可见边框的表格。你可以这样做：

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

然后像这样通过css使边框不可见：

table, tr, td {
    border: none;
}

在这里阅读有关表格的信息：http: //www.w3.org/TR/REC-html40/struct/tables.html

这里关于表格样式： http ://www.w3.org/TR/CSS21/tables.html

于 2013-09-19T12:34:58.653 回答