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.Forms添加<td>将其定义为所有width: 200px;。最后给我添加的行之间的间距：

td {
  padding: 10px 0;   
}

在每个单元格的顶部和底部添加10px填充。

查看此fiddle以查看代码的实际效果。

Answer 2

下面是正确的html标记（假设您将使用表格布局）。 Here is a demo

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


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

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

    <tr>
        <td class=Forms>Number Classes:</td>
        <td>
            <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>
        </td>
    </tr>
    <tr>
        <td class=Forms>First Class:</td>
        <td><input disabled="disabled" type="text" name="classes1" /></td>
    </tr>
    <tr>
        <td class=Forms>Bussines Class:</td>
        <td><input disabled="disabled" type="text" name="classes2" /></td>
    </tr>
    <tr>
        <td class=Forms>Economy Class:</td>
        <td><input disabled="disabled" type="text" name="classses" /></td>
    </tr>
    <tr>
        <td class=Forms>Capacidad:</td>
        <td><input maxlength="3" value="150" type="text" name="pax" /> pasajeros</td>
    </tr>
    </table>
    <input type="submit" name="enviar" value="Insertar"/>
</form>

Answer 3

我将给你答案 - 但首先我要解释一些语义以及如何正确编写表单而不使用表格。

自html启动以来，Html表单一直存在。你会惊讶地发现，当它们只是存在以帮助你正确编码语义html时，没有使用多少html表单元素。正确的语义html意味着：

1）您的代码可供文本查看者访问，例如Google搜索引擎和盲人使用的浏览器 2）履行联邦法律（美国法律要求学校/政府网站可访问） 3）从长远来看，您可以更轻松地编写后端（php）代码。

其准系统的表格应包括：

<form>
 <fieldset>
   <div>
     <label for="first-name">First Name</label>
     <input type="textbox" name="first_name" id="first-name" value="" />
   </div>
   <div>
     <label for="gender_selection">Gender</label>
     <select name="gender" id="gender_selection">
       <option value="male">Male</option>
       <option value="female">Female</option>
     </select>
   </div>
 </fieldset>
</form>

每个fieldset代码都必须有form个标记。
label标记用于定义表单元素的含义。这是什么告诉文本查看器每个表单元素代表什么！当然，你可以不用，但为什么这个标签是为了这个目的而创建的。
div标签可让您轻松设置所需的错误/更正。

CSS

form div {
  overflow: hidden;
}
form div label {
  float: left;
  width: 120px;
  padding: 0 20px 0 0;
}
form div input, form div select {
  float: left;
  width: 220px;
}

简单的css（未经测试）模仿表格形式，具有不使用表格，可访问和使用正确的html的附加优势。

现在，如果用户输了一个错误，我们就说first name，我们只需将类.error添加到该div：

   <div class="error">
     <label for="first-name">First Name</label>
     <input type="textbox" name="first_name" id="first-name" value="" />
   </div>

CSS：

div.error label {
  color: red;
}
div.error input {
  border: red;
  color: red;
}

回答你的问题：

您的html表单“label”元素没有固定的宽度。通过添加额外的<td>列或使用上面提供的代码添加固定宽度。

希望这篇文章能够帮助你创造未来。

正确对齐表单

3 个答案: