为什么在div内并排放置两个输入框会产生额外的填充顶部？

时间：2015-06-25 23:09:55

标签： html css twitter-bootstrap

我正在尝试使用bootstrap创建一个包含2列的表单。字段名称和街道并排显示（大屏幕）并没有问题，但第二个rowzip代码与City不垂直对齐，因为邮政编码有2个编辑框。如果我在邮政编码中只使用一个编辑框，一切看起来都不错，但如果我使用两个编辑框，则会出现额外的顶部。为什么呢？

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：0)

要解决这个问题，我只是从有问题的div元素中取出font-size:20px。至于为什么这似乎解决了我不能说的问题，因为你在其他div元素中也有这个问题，而且它似乎不是一个问题。但是我会说，不需要在div元素中指定font-size属性，因为你要单独给每个元素赋予font-size，除非你当然要添加或者确实有其他元素。正在使用的不在上面的代码中。我还检查了从其他div元素中取出font-size属性，它没有负面影响。

答案 1 :(得分：0)

我无法得到代码来显示你所提到的关于重新填充顶部等的问题。我删除了其中一个zip输入...仍然没有区别。 （在这里使用铬）。

以下是 Fiddle 。

我删除了所有内联样式，因此代码更易于阅读/遵循 我删除了你想要用于偏移/填充的所有空白div。那种空白的div就像最顶端的所有条形都可以最终浮动 我将col-sm-offset-1替换为row。

我在这里重新设计了拉链和城市列。 当您询问垂直对齐 zip 和城市时，这是您在寻找的吗？ 我不确定。

图片是大屏幕视图。

enter image description here

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

已添加到此帖

使用原始代码就像我在大视图中看到的那样，两个输入都是对齐的。

enter image description here

相关问题
最新问题