水平和垂直对齐标签和文本框

Question

我正在做一个形式，如图就这样在图像 ，但我无法弄清楚如何我可以在图像中显示的相同的格式排列的标签和文本框垂直和水平。

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

下面是我的简单HTML：

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

Answer 1

使用Bootstrap尝试一下

 .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; } 

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

Answer 2

试试这个没有 Bootstrap的方法：

 .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; } 

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