简单地说:如何摆脱浅蓝色的鸿沟,让"新客户账户申请"和名称/街道/城市部分相邻?
由于我是初学者,欢迎对我的代码提出任何其他建议,谢谢。
我不能在不添加更多信息的情况下提交这个,因为它说代码太多,没有足够的写作。很抱歉添加此段。
<!DOCTYPE html>
<html>
<head>
<style>
#wrap {
background-color: #83caff;
width: 1024px;
margin: 0 auto;
color: white;
}
.darkblue{
background-color: #004586;
padding-left: 20px;
line-height: none;
margin: none;
}
.paddingleftstandard {
padding-left: 20px;
padding-bottom: 10px;
}
.paddingrightstandard {
padding-right: 20px;
margin-right: 20px;
}
.darkbluefordata{
background-color: #336699;
line-height: 1.8em;
font-size:0.6em;
}
.submitbutton {
padding: 4px 6px 4px !important;
font-size: 18px !important;
background-color: #3b5998;
font-weight: bold;
text-shadow: 1px 1px #3b5998;
color: #ffffff;
border-radius: 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #3b5998;
cursor: pointer;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
</style>
</head>
<body>
<div id="wrap">
<h1 class="darkblue">New Customer Account Application<h1>
<form class="paddingleftstandard darkbluefordata" action="/action_page.php">
Name
Street
City
<br>
<input type="text" name="Name" value="">
<input type="text" name="Street" value="">
<input class="paddingrightstandard" type="text" name="City" value="">
<input class="submitbutton" type="submit" value="Submit Application">
</form>
<p> </p>
<footer>
</footer>
</div>
</body>
</html>
请添加一个新类。
h1 {
margin: 0;
}
虽然@Shoaib提出的解决方案将达到预期的效果,但根本问题是存在一些不正确的HTML和CSS。为了解决这个问题,W3验证器是一个非常宝贵的工具:https://validator.w3.org/。
关于您当前的问题,它指出由于缺少反斜杠,h1
标签未关闭,导致结束标签被解释为另一个h1
开始标签。这与无效的none
而不是0
margin
相结合,导致标题和表单都具有上边距和下边距,从而产生蓝色间隙。
至于其他提示,也可以通过CSS来改进表单格式(标签定位(。为输入字段和标签分配相等的宽度,它们会更好地排列。