为什么在div中并排放置两个输入框会产生额外的填充顶部？
[英]Why two input boxes side by side inside div impose an extra padding-top?
问题描述
我正在尝试使用引导程序制作一个包含2列的表单。 字段名称和街道并排显示（大屏幕），没有问题，但是在第二行中，邮政编码与城市不垂直对齐，因为邮政编码具有2个编辑框。 如果我只使用一个邮政编码编辑框，那么一切看起来都很好，但是如果我使用两个编辑框，则会出现一个额外的填充顶部。 为什么？
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <H1>Hello</H1> <P>Sample text here.</P> <section id="Delivery" class="Delivery-section"> <div class="container"> <div class="row" style='padding:0px'> <div class="col-sm-1"> </div> <div class="col-sm-10" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'> <legend style='text-align:center'>Delivery Address</legend> </div> <div class="col-sm-1"> </div> </div> <div class="row" style='padding:0px'> <div class="col-sm-1"> </div> <div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'> <span style='font-weight: bold;font-size:13px;'>Name: (*)</span><br> <input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="name" id="name" value='' size="30" /> </div> <div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px'> <span style='font-weight: bold;font-size:13px;'>Street: (*)</span><br> <input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="street" id="street" value='' size="30" /> </div> <div class="col-sm-1"> </div> </div> <div class="row" style='padding:0px'> <div class="col-sm-1"> </div> <div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px;'> <span style='font-weight: bold;font-size:13px;'>City: (*)</span><br> <input style="width:100%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="city" id="city" value='' size="30" /> </div> <div class="col-sm-5" style='font-size: 20px;padding:0px;text-align:left;padding-left:10px;'> <span style='font-weight: bold;font-size:13px;'>Zip code: (*)</span><br> <input style="width:14%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="cp1" id="cp1" value='' size="30" /> <input style="width:14%;font-size:12px;font-weight:regular;line-height:20px;" type="text" name="cp2" id="cp2" value='' size="30" /> </div> <div class="col-sm-1"> </div> </div> </div> </section>
2 个解决方案
解决方案1
0 2015-06-26 02:46:05
为了解决这个问题，我只是从有问题的div元素中取出了font-size:20px 。 至于为什么这似乎已经解决了问题，我不能说，因为您在其他div元素中也有此问题，这似乎不是问题。 但是我会说，不需要在div元素中指定font-size属性，因为您要分别为每个元素赋予font-size，除非您当然要添加或确实有其他元素上面的代码中没有使用的代码。 我还检查了从其他div元素中取出font-size属性，它没有负面影响。
解决方案2
0 2015-06-26 02:54:56
我无法获得代码来显示您对重新填充顶部等的要求。我删除了一个zip输入...仍然没有区别。 （此处使用chrome）。
这是小提琴 。
我删除了所有内联样式，因此代码更易于阅读/关注。
我删除了所有您想要用于偏移/填充的空白div。 像这样的空白div，最顶部的所有小节都可能浮动。
如您row所见，我将其替换为col-sm-offset-1 。
我在这里重新制作了邮政编码和城市cols。 当您问有关使拉链与城市垂直对齐时，这是您要找的东西吗？
我不确定。
图像具有大屏幕视图。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>Starter Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <style> body { padding-top: 50px; } .space { margin-top: 2%; margin-bottom: 2%; } .address { font-size: 20px; text-align:center; } .inputs { width:100%; font-size:12px; font-weight:300; line-height:20px; } .zip { width:14%; font-size:12px; font-weight:300; line-height:20px; } .labels { font-size: 20px; padding:0px; padding-left:0px; } </style> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top "> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand " href="#">Project name</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container col-lg-12 space"></div> <div class="container col-lg-12"> <H1>Hello</H1> <P>Sample text here.</P> <section id="Delivery" class="Delivery-section"> <div class="container"> <div class="row"> <!--<div class="col-sm-1"> </div>--> <div class="col-sm-10 address" > <legend>Delivery Address</legend> </div> <!--<div class="col-sm-1"> </div> --> </div> <div class="row col-sm-10 col-sm-offset-1"> <!-- <div class="col-sm-1"> </div>--> <div class="col-sm-5"> <span class='labels'>Name: (*)</span><br> <input class='inputs' type="text" name="name" id="name" value='' /> </div> <div class="col-sm-5"> <span class='labels'>Street: (*)</span><br> <input class='inputs' type="text" name="street" id="street" value='' /> </div> <!-- <div class="col-sm-1"> </div>--> <!--</div>--> <div class="row col-sm-5"> <!-- <div class="col-sm-1"> </div>--> <div class="col-sm-12"> <span class='labels'>City: (*)</span><br> <input class='inputs' type="text" name="city" id="city" value='' /> </div> <div class="col-sm-12"> <span class='labels'>Zip code: (*)</span><br> <input class="zip" type="text" name="cp1" id="cp1" value='' /> <input class="zip" type="text" name="cp2" id="cp2" value='' /> </div> <!-- <div class="col-sm-1"> </div>--> </div> </div> </div> </section> </div><!-- /.container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html>
添加到此帖子
正如我在大视野中看到的那样，使用您的原始代码，这两个输入都是对齐的。
在IE中输入字段内部的padding-top
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.