2013-09-19 3 views
-3

, если это возможно, можно выровнять HTML элементы горизонтально в одной строке , такие как, например, с моим кодом:Как выровнять HTML горизонтально с помощью CSS

<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» is «Qty».

+1

У вас нет ни малейшего понятия, что делает код выше, не так ли? – feeela

+0

Наверняка нет. Я также ожидал бы 'if ($ cappuccino_qty> 0)' – mplungjan

+0

извините, я был в спешке – user2732815

ответ

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

+0

быстрый вопрос, как сделать его невидимым? – user2732815

+1

'border-style: none;' - http://www.w3schools.com/cssref/pr_border-style.asp –

+0

Я обнаружил, что вы можете просто использовать

для получения невидимых границ – user2732815

Смежные вопросы