html - 正确对齐表格

Question

我有这个表格:

<form action="insertar-modelo.php" method="post" enctype="application/x-www-form-urlencoded">
    <table>


    <tr><td class=Forms>ICAO: <input type="text" value="" name="ICAO" /><br/><br/></td</tr>

    <tr><td class=Forms>Name: <input type="text" value="Airbus A320" name="nombre" /><br/><br/></td></tr>
    <tr><td class=Forms>Price: <input maxlength="9" value="1000000" type="text" name="precio" /> €<br/><br/></td></tr>

    <tr><td class=Forms>Number Classes: <select name="numberclasses" id="numberclasses" onchange="callAjax()">
        <option>Select Number of Classes</option>
        <?php
        echo'<option value="1">One</option>';
        echo'<option value="2">Two</option>';
        echo'<option value="3">Three</option>';

        ?>
    </select><br/><br/></td></tr>


    <tr><td class=Forms>First Class: <input disabled="disabled" type="text" name="classes1" /><br/><br/></td></tr>
    <tr><td class=Forms>Bussines Class: <input disabled="disabled" type="text" name="classes2" /><br/><br/></td></tr>
    <tr><td class=Forms>Economy Class: <input disabled="disabled" type="text" name="classses" /><br/><br/></td></tr>

    <tr><td class=Forms>Capacidad: <input maxlength="3" value="150" type="text" name="pax" /> pasajeros<br/><br/></td></tr>
    </table><br />
    <input type="submit" name="enviar" value="Insertar"/>
    </form>

CSS 类 Forms 是:

td.Forms { 


    text-align: left;
    text-indent: 10px;
    font-family: Century Gothic;
    font-weight: normal;
    font-size: 15px; 
    white-space: nowrap;
}

框在标题结束时开始，我希望所有框都在同一部分开始。我认为这个想法是在一列中看到标题，在另一列中看到方框，就像这样 http://i48.tinypic.com/2nbd2m8.png , 但我有这个 http://i49.tinypic.com/1exb80.png

Answer 1

您需要为输入字段添加额外的单元格 ( <td> )，以便它们都从相同的位置开始。此外，您可能希望定义宽度以确保一行中的一个单元格与另一个单元格之间有足够的空间。我将它定义为所有 <td>通过添加 width: 200px;到您的 td.Forms。最后给出我添加的行之间的间距:

td {
  padding: 10px 0;   
}

在每个单元格的顶部和底部添加 10px 的内边距。

检查这个 fiddle查看运行中的代码。