Question

如果可能，是否可以在一行中对齐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>

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

Answer 1

在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

如何使用CSS水平对齐HTML

1 个答案: