出于某种原因，我创建的表单在每个输入类型之间有很多空间。我试着做 form{ padding: 0px;边距:0px；边框:无；但这没有用。如果有人可以提供帮助，我不确定如何完全解决这个问题。我添加了一个 JSFiddle 来向大家展示我在说什么。提前感谢您的帮助。
HTML 代码:
<body>
<div class="header">Our Really Cool Banking App</div>
<div id="leftcolumn">
<!-- Creating Buttons here -->
<div id="nav">
<ul>
<li><a href="banking.php">Home</a></li>
<li><a href="checking.php">Checking</a></li>
<li><a href="savings.php">Savings</a></li>
<li><a href="createaccount.php">Create Account</a></li>
<li><a href="createloan.php">Create Loan</a></li>
</ul>
</div>
</div>
<div id="checking" class="toggle" style="display:none">show the stuff1</div>
<div id="savings" class="toggle" style="display:none">show the stuff2</div>
<div id="createaccount" class="toggle" style="display:none">show the stuff3</div>
<div id="createloan" class="toggle" style="display:none">show the stuff3</div>
<div class="inputBox">
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
Username: <input type="text" name="username"><br>
Amount: <input type="text" name="amount"><br>
Type: <input type="radio" name="accounttype" value="Checking">Checking
<input type="radio" name="accounttype" value="Savings">Savings<br>
Action: <input type="radio" name="bankaction" value="Deposit">Deposit
<input type="radio" name="bankaction" value="Withdraw">Withdraw<br>
<input type="submit" value="Submit">
</form>
</div>
<?php
//To Test
var_dump($_POST);
?>
</body>
CSS 代码:
.header {
position: relative;
width: 1265px;
line-height:68px;
background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
/* styles under are just for fun */
border-radius: 5px 5px 0 0;
text-indent: 20px;
text-transform: uppercase;
font-family: arial;
font-weight: bold;
color: white;
}
/* making backgrounds compatible */
.header {
background: rgba(20,82,159,1);
background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,82,159,1)), color-stop(100%, rgba(0,119,230,1)));
background: -webkit-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -o-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -ms-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: linear-gradient(to bottom, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14529f', endColorstr='#0077e6', GradientType=0 );
}
#leftcolumn{
float: left;
width: 200px; /*Width of left column*/
height: 650px;
margin-top: -16px;
background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
color: white;
}
#leftcolumn {
background: rgba(20,82,159,1);
background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,82,159,1)), color-stop(100%, rgba(0,119,230,1)));
background: -webkit-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -o-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -ms-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: linear-gradient(to bottom, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14529f', endColorstr='#0077e6', GradientType=0 );
}
#nav {
color: white;
}
#nav ul {
padding-top: 40px;
padding-left: 15px;
}
#nav ul li {
list-style-type: none;
text-decoration: none;
font-size: 18px;
font-family: Verdana;
margin: 0px 0 40px 0;
}
a:link {color:white;}
a:visited {color:white;}
a:active {color:white;}
a:hover {color:rgb(152,152,152);}
.inputBox {
position: relative;
width: 500px;
line-height:100px;
margin-top: 25px;
margin-left: 450px;
padding-bottom: 10px;
/* styles under are just for fun */
border-radius: 5px 5px 0 0;
text-indent: 20px;
text-transform: uppercase;
font-family: arial;
font-weight: none;
font-size:12px;
color: white;
text-align: center;
}
form{
padding: 0px;
margin: 0px;
border: none;
}
.inputBox {
background: rgba(20,82,159,1);
background: -moz-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(20,82,159,1)), color-stop(100%, rgba(0,119,230,1)));
background: -webkit-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -o-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: -ms-linear-gradient(top, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
background: linear-gradient(to bottom, rgba(20,82,159,1) 0%, rgba(0,119,230,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14529f', endColorstr='#0077e6', GradientType=0 );
}
最佳答案
这是因为在 .inputBox 元素上设置了 line-height。
.inputBox {
position: relative;
width: 500px;
line-height:100px; /* Remove or reduce this value */
}
关于html - html表单输入项之间的间距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23439637/