Html 具有神秘顶部偏移的浮动形状

我遇到了一个奇怪的问题，表单顶部有大约1倍的边距，我找不到原因。我也无法在jsbin中重现这种情况，所以我不确定是什么导致了这种情况

下面是正在发生的事情的图像：

Chrome几乎没有提到导致此问题的边距、填充或边框。表单位于列表项中，就像左侧格式正确的链接一样。经过进一步检查，ie实际上说它的顶部有2px的“偏移量”，但同样没有说明它存在的原因

以下是问题中的一些HTML（注意，由于以前的内联块问题，很多内容实际上都在一行上）：

---

实际上，我可以通过将

input{display:inline block}

更改为

input{display:block}

来解决这个问题，但这会导致输入没有按照我想要的方式对齐。我不明白为什么改变显示器会导致这个问题。对此的任何解释/修复都会很有帮助（不是像

top:-2px

）。

内联块

观察空白（例如新行（\n），等等）

因此，除非结束标记与开始标记位于同一行，否则在使用内联块时，最终将出现“随机空白”。例如

---

有一个“技术”答案，如果您选择…，您可以研究它。

您可以最大限度地简化标记！此外，您还可以消除

内联块

（就个人而言，我似乎从未使用过它）

拉小提琴-

HTML

---

我只是为了可读性把代码隔开。我以前在列表元素上遇到过这个问题，ul标签之间的所有内容都在一行上。只是为了好玩：试试这个：是的，这并没有解决它，这只是xhtml中所必需的。这会让你了解发生了什么：@gp。正如我在那个答案上所说的，我认为这不是问题所在，因为ul标签之间的所有内容都在一条线上。只是想尝试一下，我去掉了文档中的所有标签，这并没有改变任何东西。我实际上发现我可以让第二个ul中的链接有一个左浮动，让表单有一个右浮动。这似乎神奇地解决了所有问题，但无论如何还是要感谢你的帮助。不用担心，似乎不需要列出这些项目。

<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>

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%}

<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>

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;
}