水平和veritcally对齐标签和文本框

Question

我正在制作一个如此image所示的表单，但我无法弄清楚如何将这些标签和文本框垂直和水平对齐，并采用该图像中显示的相同格式。< / p>

这是我的jsfiddle：https://jsfiddle.net/w6Lq9a1m/1/

以下是我简单的HTML：

＆＃13;

＆＃13;

<div class="row">
  <h2> INSURANCE FORM</h2>
  <h4> <i>BASIC DETAILS</i></h4>
  <form action="/action_page.php">
    FIRST NAME<br>
    <input type="text" name="fname" value="Mickey">
    <br> LAST NAME<br>
    <input type="text" name="lname" value="Mouse">
    <br><br> EMAIL
    <br>
    <input type="text" name="email" value="abc@host.com">
    <br> PHONE NUMBER<br>
    <input type="text" name="number" value="123-456-789">
    <br> COUNTRY
    <br>
    <select name="country">
      <option value="canada">Canada</option>
    </select>
    <br> PROVINCE
    <br>
    <select name="province">
      <option value="ontario">ONTARIO</option>
    </select>
    <br> CITY
    <br>
    <select name="city">
      <option value="ottawa">OTTAWA</option>
    </select>
    <br>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用Bootstrap

尝试此操作

＆＃13;

＆＃13;

.form-horizontal .form-control {
  border-radius:0;
  border:none;
  box-shadow:none;
  border-bottom:1px solid orange;
}
.form-horizontal .form-control:focus{
  box-shadow:none;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-12">
  <h2> INSURANCE FORM</h2>
  <h4> <i>BASIC DETAILS</i></h4>

  <form action="/action_page.php" class="form-horizontal">
    <div class="form-group">
      <div class="col-sm-6">
      <label>FIRST NAME</label>
        <input type="text" class="form-control" name="fname" value="Mickey">
      </div>
      <div class="col-sm-6">
      <label>LAST NAME</label>
        <input type="text" class="form-control" name="lname" value="Mouse">
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-6">
      <label>EMAIL</label>
        <input type="text" class="form-control" name="email" value="abc@host.com">
      </div>
      <div class="col-sm-6">
      <label>PHONE NUMBER</label>
        <input type="text" class="form-control" name="number" value="123-456-789">
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-6">
      <label>COUNTRY</label>
        <select name="country" class="form-control">
          <option value="canada">Canada</option>
        </select>
      </div>
      <div class="col-sm-3">
      <label>PROVINCE</label>
        <select name="province" class="form-control">
          <option value="ontario">ONTARIO</option>
        </select>
      </div>
      <div class="col-sm-3">
      <label>CITY</label>
        <select name="city" class="form-control">
          <option value="ottawa">OTTAWA</option>
        </select>
      </div>
    </div>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个没有引导程序：

＆＃13;

＆＃13;

.left, .right {
   width: 45%;
   margin-bottom: 30px;
}

.left {
  float: left;
}

.right {
   float: right;
}

.hh {
   width: 45%;
   float: right;
}

.halfleft,.halfright {
   width: 45%;
}

.halfleft {
   float: left;
}

.halfright {
   float: right;
}

input[type='text'],select {
   width: 100%;
   border:none;
   border-bottom: 2px orange solid;
   margin-top: 3px;
   outline: none;
}

＆＃13;

<div class ="row">
   <h2> INSURANCE FORM</h2>
   <h4> <i>BASIC DETAILS</i></h4>
   <form action="/action_page.php">
     <div class="left">
     	 FIRST NAME<br>
         <input type="text" name="fname" value="Mickey">
     </div>
     <div class="right">
     	 LAST NAME<br>
      <input type="text" name="lname" value="Mouse">
     </div>
      <div class="left">
      	EMAIL<br>
      <input type="text" name="email" value="abc@host.com">
      </div>
      <div class="right">
      	PHONE NUMBER<br>
      <input type="text" name="number" value="123-456-789">
      </div>
      <div class="left">
      	COUNTRY<br>
      <select name="country">
         <option value="canada">Canada</option>
      </select>
      </div>
      <div class="hh">
      <div class="right halfleft">
      	 PROVINCE<br>
      <select name="province">
         <option value="ontario">ONTARIO</option>
      </select>
      </div>
      <div class="right halfright">
      	CITY<br>
      <select name="city">
         <option value="ottawa">OTTAWA</option>
      </select>
      </div>
      </div>
   </form>
</div>

＆＃13;

＆＃13;

＆＃13;