表格需要对齐

时间:2018-03-19 13:24:48

标签: javascript

我大学任务的网站,

我在JavaScript中为我的网站创建了一个表单,我需要对齐不同的输入框,并且我正在努力解决这个问题。

这是我已经拥有的代码以及我所包含的CSS类。



.booking1 {
  position: relative;
  float: left;
  padding: 0px;
}

.booking2 {
  position: relative;
  float: right;
  padding-top: 10px;
  padding-left: 200px;
}

<table>
  <th scope="col" class="booking1">
    <div class="form">
      <form method="post" action="mailto:joshua.harvey2@stu.mmu.ac.uk" name="ContactForm" onsubmit="return ValidateContactForm();">
        <p>Name: <input type="text" size="35" name="Name"></p>
        <p>E-mail Address: <input type="text" size="35" name="Email"></p>
        <p>Telephone: <input type="text" size="35" name="Telephone"><br>
          <input type="checkbox" name="DoNotCall" onclick="EnableDisable(this);"> Please do not call me.</p>
        <p>Date of Birth: <input type="text" size="35" name="DateofBirth"></p>
        <p>RoomType
          <select type="text" value="" name="RoomType">
        					<option>  </option>
        					<option>Single</option>
        					<option>Twin</option>
        					<option>Double</option>
        					<option>Triple</option>
        					<option>Family</option>
        				</select></p>
        <p>Date of Arrival: <input type="text" size="35" name="DateofArrival"></p>
        <p>Check Out Date: <input type="text" size="35" name="CheckOutDate"></p>
        <p>Number Of Guests
          <select type="text" value="" name="RoomType">
        					<option>   </option>
        					<option> 1 </option>
        					<option> 2 </option>
        					<option> 3 </option>
        					<option> 4 </option>
        				</select></p>
        <p><input type="submit" value="Send" name="submit">
          <input type="reset" value="Reset" name="reset"></p>
      </form>
    </div>
  </th>
  <th scope="col" class="booking2">
    <div class="Login">
      <form method="post">
        <p>Username: <input type="text" size="65" name="username"></p>
        <p>Password: <input type="text" size="65" name="password"></p>
        <p><input type="submit" value="Send" name="submit">
          <input type="reset" value="Reset" name="reset"></p>
      </form>
    </div>
  </th>
</table>
</body>

<!-- Footer Start -->
<br />
<table class="footer">
  <th scope="col" class="socialmedia1">Social Media Links</th>
  <th scope="col" class="copyright">© Hotel Verdene 2017</th>
  <th scope="col" class="socialmedia2">Social Media Links</th>
</table>
&#13;
&#13;
&#13;

0 个答案:

没有答案