我遇到一个奇怪的问题,表格上面有大约1px的边距,我找不到原因。我也无法在jsbin中重新创建这种情况,所以我不确定是什么导致它。
以下是正在发生的事情的图像:
Chrome对于边距,填充或边框没有任何说明导致此问题。表单位于列表项内,就像左侧正确格式化的链接一样。经过进一步检查,即实际上确实说它顶部有2px的“偏移”,但再次没有说明为什么它存在。
来自问题的一些HTML(请注意,由于以前的内联块问题,很多这些东西实际上都在一行上):
<div id="headcontainer">
<div id="headcenter">
<header class="left">A header</header>
<nav>
<ul class="left">
Some other list stuff
</ul>
<ul class="right">
<li><a href="">Login</a></li>
<li>
<form id="loginform">
<input id="usernamein" type="text">
<input id="passwordin" type="password">
</form>
</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</div>
还有一些CSS(整个文档有一个html5 css重置):
label,input{font-family:"Arial Rounded MT Bold","Helvetica Rounded",Arial,sans-serif}
input{margin:0;padding:0;border:0;display:inline-block}
.left{float:left}
.right{float:right}
.clear{clear:both}
#headcontainer{position:fixed;z-index:100;height:30px;width:100%;top:0;background-color:#1c1c1c;border-bottom:3px solid #cc3f33}
#headcenter{max-width:1000px;margin:0 auto}
#headcenter header{padding:5px;margin:0 10 0 0px}
#headcenter nav{height:30px}
#headcenter ul{list-style:none;height:inherit}
#headcenter li{display:inline-block;height:inherit}
#headcenter li a{height:23px;padding:7px 4px 0;border-bottom:3px solid #cc3f33}
#loginform{display:inline-block;width:200px;height:30px}
#usernamein,#passwordin{width:50%;height:100%}
我实际上可以通过将input{display:inline-block}
更改为input{display:block}
来解决问题,但这会导致输入无法按照我想要的方式对齐。我不明白为什么改变显示甚至会导致这个问题。对此的任何解释/修复都会有所帮助(不像top:-2px
)。
答案 0 :(得分:0)
inline-block
观察空格(例如换行(\ n)等等)
因此,除非您的结束标记与开始标记位于同一行,否则在使用内联块时最终会出现“随机空白”。例如。 ......
如果你选择的话,你可以研究一个“技术性”答案......
答案 1 :(得分:0)
您可以将标记简化到最大程度!此外,你可以消除inline-block
(我个人似乎永远不会使用它)
有一个小提琴 - Fiddle Link!
HTML
<header>
<nav>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<form id="loginform">
<a href="#">Login</a>
<input id="usernamein" type="text" />
<input id="passwordin" type="password" />
</form>
</nav>
</header>
CSS
body {
margin:0;
font-family:"Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
input {
margin:0 10px 0 0;
padding:0;
border:0;
height:23px;
float: left;
}
header {
height:30px;
background:#1c1c1c;
border-bottom:3px solid #cc3f33;
}
header nav form {
margin: 10px 0 0;
float: right;
}
header nav a {
float: left;
display: block;
color: #FFF;
margin: 10px;
}
header nav form a {
margin: 0 10px 0;
color: #FFF;
}