难以对齐 html 表单元素答案

【问题标题】：Difficulty in aligning html form elements难以对齐 html 表单元素
【发布时间】：2017-01-11 10:09:03
【问题描述】：

<!DOCTYPE html>
<html>
<head> 
</head>
<body bgcolor="#E6E6FA">
    <form name="orders" action="ordering_action.php" method="post" enctype="multipart/form-data" onsubmit="validate()">

        <table align="Center"  >
            <tr>
            <td height="50" width=330>Prescription 1:<div id="kids">

    <input type="file" required name="Image1">
    <input type="button" id="add_kid()" onclick="addkid()" value="+" />(MAX 3)
  </div></td></tr>
           <tr><td height="40">NIC 
        <input class="textfill" type=text required name=NIC placeholder="XXXXXXXXXV"  ></td></tr>
        <tr><td ><div>Pick up
            <input   type=radio name=DP  required value="Pickup">


             Delivery
                <input  class="textfill" type=radio name=DP required value="Delivery" onmouseup="textbox(this)"/></div></td></tr>



        <tr><td height="50"><div>Time
        <input  class="textfill" type=time name=DPTime required></div></td></tr>
        <tr><td height="50"><div>Telephone 
        <input  class="textfill" type=text name=Tele required  ></div></td></tr> 
        <tr><td height="50"><div>Email
        <input  class="textfill" type=email required name=Email placeholder="mymail@mail.com"  ></div></td></tr>



        <tr><td colspan=5 align=center>
            <input class="button" type=submit name=submit value=Send>
            <input class="button" type=reset name=reset value=Cancel> </td></tr>
        </table>          

          </form>

    </body>
</html>

这是我的 html 代码，我需要进行一些更正，以使包括交付单选按钮在内的所有文本框都在“+”按钮下方对齐（因为现在文本框似乎有点歪了）

【问题讨论】：

validator.w3.org/nu

标签： html alignment html-table

【解决方案1】：

将所有输入包装在一个 div 中并提供 align="right"

您还可以使用引导 div 来对齐它，这也可以响应不同的屏幕尺寸。

http://getbootstrap.com/components/

【讨论】：

【解决方案2】：

试试这个代码；

        <!DOCTYPE html>
    <html>
    <head>
      <style>input.textfill {
        float: right;
    }</style>
    </head>
    <body bgcolor="#E6E6FA">
        <form name="orders" action="ordering_action.php" method="post" enctype="multipart/form-data" onsubmit="validate()">

            <table align="Center"  >
                <tr>
                <td height="50" width=330>Prescription 1:<div id="kids">

        <input type="file" required name="Image1">
        <input type="button" id="add_kid()" onclick="addkid()" value="+" />(MAX 3)
      </div></td></tr>
               <tr><td height="40">NIC
            <input class="textfill" type=text required name=NIC placeholder="XXXXXXXXXV"  ></td></tr>
            <tr><td ><div style="  float: right;">Pick up
                <input   type=radio name=DP  required value="Pickup">


                 Delivery
                    <input  class="textfill" type=radio name=DP required value="Delivery" onmouseup="textbox(this)"/></div></td></tr>



            <tr><td height="50"><div>Time
            <input  class="textfill" type=time name=DPTime required></div></td></tr>
            <tr><td height="50"><div>Telephone
            <input  class="textfill" type=text name=Tele required  ></div></td></tr>
            <tr><td height="50"><div>Email
            <input  class="textfill" type=email required name=Email placeholder="mymail@mail.com"  ></div></td></tr>



            <tr><td colspan=5 align=center>
                <input class="button" type=submit name=submit value=Send>
                <input class="button" type=reset name=reset value=Cancel> </td></tr>
            </table>

              </form>

        </body>
    </html>

输入框现在向右浮动

【讨论】：