Question

我几天后一直在做一些HTML代码，但是我无法弄清楚如何以横向外观制作这一切，就像这个exsampel：

ID     Name     Commodity    Weight    Tolerance
Box     Box      drop down    box          box

所以box代表ofc的“输入形式”，下拉应该是我的数据库中的商品名称。

目前，我有这段代码：

<body>

<div id="header">
    <h2 align="center" style="color: #FFFFFF">Edit Recept</h2>
</div>

<div id="content">
    <div id="form-wrapper">
        <form method="post" action="Front">

        <table>

                <tr>
                    <td>ID: <td> 
                    <td><input type="text" name="Id" />
                </tr>

                <tr>
                    <td>Name:<td>
                    <td><input type="text" name="name" />
                </tr>

        </table>

        <table>
                <tr>

                <p>     </p>
                <p>Add commodities to your recept: <p>
                </tr>
                <tr>

                    <td>Select commodity:<td>
                    <td><select>
                            <option value="" disabled="disabled" selected="selected">Please select Commodity</option>
                            <option value="1">One</option>
                            <option value="2">Two</option>
                        </select>
                </tr>

                <tr>

                    <td>Weight:<td>
                    <td><input type="text" name="tolerance" />
                </tr>

                <tr>
                    <td>Tolerance:<td>
                    <td><input type="text" name="name" />
                </tr>
                <tr>
                    <td><input type="submit" value="Add" /><td> 
                <tr>    
        </table>
                <br>
                <input type="submit" value="Save" /> 
                <input type="reset" value="Cancel" />
                <input type="hidden" name="whichPage" value="prescription"/>


        </form>

    </div>
    <p align="center">
        Enter the new values and press save to make the change 
    </p>
</div>

有一个技巧怎么做容易？我的目标是让它像我在顶部描述的那样，然后添加一个按钮，如果你想在同一处方中存储更多商品，将在另一个下添加新的输入框。

Answer 1

只需将标签全部放在表格的一行中，然后这些标签的输入字段应该在第二行中的jsut下面。因此，您可以根据需要使用基于colomn的输入，这里是a fiddle as a sample。

<div id="header">
  <h2 align="center" style="color: #FFFFFF">Edit Recept</h2>
</div>

<div id="content">
<div id="form-wrapper">
  <form method="post" action="Front">

    <table>

      <tr>
        <td>ID </td>
        <td>Name</td>
        <td>Select commodity</td>
        <td>Weight</td>
        <td>Tolerance</td>

      </tr>

      <tr>
        <td><input type="text" name="Id" /></td>
        <td><input type="text" name="name" /></td>
        <td><select>
          <option value="" disabled="disabled" selected="selected">Please select Commodity</option>
          <option value="1">One</option>
          <option value="2">Two</option>
        </select></td>
        <td><input type="text" name="tolerance" /></td>
        <td><input type="text" name="name" /></td>
      </tr>
    </table>

    <br />
    <input type="submit" value="Save" />
    <input type="reset" value="Cancel" />
    <input type="hidden" name="whichPage" value="prescription"/>
  </form>

</div>
<p align="center">
  Enter the new values and press save to make the change
</p>
</div>

注意：您应该注意表元素标记的结束标记，因为您缺少某些标记并在某些行中引入了开放标记而不是结束标记。

Answer 2

只是一个小小的暗示。这将显示彼此下方的文本和输入框。但是你需要以适当的方式重新排列整个桌子。也不要使用多个表。使用包含多列的单表。

<table>
    <tr>
       <td>ID: </td> 
       <td>Name:</td>
    </tr>

    <tr>
       <td><input type="text" name="Id" /></td>
       <td><input type="text" name="name" /></td>
    </tr>
</table>

在HTML中使输入表格框水平

2 个答案: