难以对齐html表单元素

时间:2016-09-03 12:24:42

标签: html alignment html-table

<!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代码,我需要进行一些更正,以便所有包含传送单选按钮的文本框都在&#34; +&#34;下方对齐。按钮(因为现在文本框似乎有点弯曲)

enter image description here

2 个答案:

答案 0 :(得分:0)

将所有输入包装在div中并提供align =“right”

你也可以使用bootstrap div来对齐它,这也是对不同屏幕尺寸的响应。

http://getbootstrap.com/components/

答案 1 :(得分:0)

试试这段代码;

        <!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>

输入框现在正好浮动