获取文本框名称和文本框内联答案

【问题标题】：Getting text box names and text boxes inline获取文本框名称和文本框内联
【发布时间】：2016-10-11 04:04:52
【问题描述】：

以下是我用来制作 html 表单的代码！目前，文本框名称和文本框是一个接一个。例如：网卡及其文本框不是内联的。

如果我对一对元素使用两个<td> 标签，尽管它们变成内联的，但它们相距甚远！我该如何解决这个问题？

 <html>
    <head>
        <style>input.textfill {
            float: right;
        }</style>
        </head>

         <body bgcolor="#E6E6FA">
            <form id=orders name="orders" action="orders_action.php" method="post" enctype="multipart/form-data"  onsubmit="return Validate(this);">

                <table align="Center"  >

                   <tr><td height="40"><br>
                <div class="headingbox" id="hBoxNIC" > National ID  </div>
                <div style="width:100%;text-align:center;">
                <input type="text" placeholder="920290505v" maxlength="13" name=NIC required   autofocus  />
                       </div>

                </td></tr>
                <tr><td height=50 ><div class="headingboxs">Pick up</div>
                    <input   type=radio name=DP  required value="Pickup">

    <div style="  float: right;"><div class="headingboxs">
        Delivery</div>
                        <input  class="textfill" type=radio name=DP required value="Delivery" onmouseup="textbox(this)" /></div><br><br></td></tr>


    <tr><td height="50"><div class="headingbox" >Expected Time </div>
                <div style="width:100%;text-align:center;">
                <input type="time" id=time  autofocus name=DPTime    onfocusout="hid('timeerror2');" onfocus="show('timeerror2');"min="09:00:00" max="22:00:00" /><br>
                </div>

                   <div class="poperror" id="timeerror2"> Pharmacy is opened from 9AM to 10PM  </div>
        <script>
    var input =  document.getElementById('time');
    function validateTime (element) {

    var minTime = element.min;
    var maxTime = element.max
    var value = element.value + ':00'

    if(minTime > value || value > maxTime) {
    console.log("Time is outside of min/max.");
    }

    }       

    </script>  

                    </td></tr>


    <tr><td height="50"><div class="headingbox" id="hBoxPN"> Phone Number </div>
                <div style="width:100%;text-align:center;">

                <input type="text" maxlength=10;  autofocus name=Tele /><br>
                </div>
                <div class="error" id="phoneerror" > error occured </div><br></td></tr>





                <tr><td height="50"><div class="headingbox" id="hBoxEM"> E-mail </div>
                <div style="width:100%;text-align:center;">
                <input type="text"  autofocus name=Email placeholder="xxx@gmail.com"    /><br>
                </div>
                <div class="error" id="emailerror" > error occured </div><br>

                    </td></tr>
                             <tr>
                        <td height="50" width=330><br><div class="headingbox"> Prescription Copy-1</div> <div id="kids">

    <input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />


    <label class="fileUpload">
        <input id="uploadBtn" type="file" class="upload" name=Image1 />
        <span class="uploadBtn">Upload</span>
    </label>



            <input type="button" id="add" onclick="addkid()" value="+" />

          </div></td></tr>
                    <script>
                    document.getElementById("uploadBtn" ).onchange = function()  {
                document.getElementById("uploadFile").value = this.value;
            };
        </script>


            </div></td></tr>

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

                  </form>



        </body>
    </html>

【问题讨论】：

标签： html alignment html-table element inline

【解决方案1】：

我认为this 是您正在寻找的。我基本上用span 标签替换了所有div 标签。 span 元素自然会内联，而 div 会尝试向下移动到下一行。

            var input = document.getElementById('time');

            function validateTime(element) {

              var minTime = element.min;
              var maxTime = element.max
              var value = element.value + ':00'

              if (minTime > value || value > maxTime) {
                console.log("Time is outside of min/max.");
              }

            }

            document.getElementById("uploadBtn").onchange = function() {
              document.getElementById("uploadFile").value = this.value;
            };

input.textfill {
  float: right;
}

<body bgcolor="#E6E6FA">
  <form id=orders name="orders" action="orders_action.php" method="post" enctype="multipart/form-data" onsubmit="return Validate(this);">
    <table align="">
      <tr>
        <td height="40">
          <br>
          <span class="headingbox" id="hBoxNIC"> National ID </span>
          <span style="width:100%;text-align:center;">
            <input type="text" placeholder="920290505v" maxlength="13" name=NIC required autofocus />
          </span>
        </td>
      </tr>
      <tr>
        <td height=50>
          <span class="headingboxs">Pick up</span>
          <input type=radio name=DP required value="Pickup">
          <span style="  float: right;">
            <span class="headingboxs">
              Delivery</span>
          <input class="textfill" type=radio name=DP required value="Delivery" onmouseup="textbox(this)" />
          </span>
          <br>
          <br>
        </td>
      </tr>
      <tr>
        <td height="50">
          <span class="headingbox">Expected Time </span>
          <span style="width:100%;text-align:center;">
            <input type="time" id=time autofocus name=DPTime onfocusout="hid('timeerror2');" onfocus="show('timeerror2');" min="09:00:00" max="22:00:00" />
            <br>
          </span>
          <span class="poperror" id="timeerror2"> Pharmacy is opened from 9AM to 10PM </span>
        </td>
      </tr>
      <tr>
        <td height="50">
          <span class="headingbox" id="hBoxPN"> Phone Number </span>
          <span style="width:100%;text-align:center;">
            <input type="text" maxlength=10; autofocus name=Tele />
            <br>
          </span>
          <span class="error" id="phoneerror"> error occured </span>
          <br>
        </td>
      </tr>
      <tr>
        <td height="50">
          <span class="headingbox" id="hBoxEM"> E-mail </span>
          <span style="width:100%;text-align:center;">
            <input type="text" autofocus name=Email placeholder="xxx@gmail.com" />
            <br>
          </span>
          <span class="error" id="emailerror"> error occured </span>
          <br>
        </td>
      </tr>
      <tr>
        <td height="50" width=330>
          <br>
          <span class="headingbox"> Prescription Copy-1</span>
          <span id="kids">
            <input id="uploadFile" class="disableInputField" placeholder="Choose File" disabled="disabled" />
            <label class="fileUpload">
              <input id="uploadBtn" type="file" class="upload" name=Image1 />
              <span class="uploadBtn">Upload</span>
          </label>
          <input type="button" id="add" onclick="addkid()" value="+" />
          </span>
        </td>
      </tr>
      <tr>
        <td colspan=5 align=center>
          <input class="button" type=submit name=submit value=Place>
          <input class="button" type=reset name=reset value=Cancel>
        </td>
      </tr>
    </table>
  </form>
</body>

【讨论】：

thanx 但我不希望它们与所有文本框在彼此下方对齐！你的他们有点坏了
您希望它们都对齐到它们的 desc 下方的左边缘，例如 this？
原来也是这样！我希望它内联并靠近在一起，即jsfiddle.net/k9spo7ru 以及按顺序排列的元素！不是一个接一个！就像文本框的名称和文本框在同一行！并且下一行的文本框就在上一行的文本框下方！我的意思是电子邮件的文本框在电话号码的正下方！即它们都垂直对齐！