浮动形式有神秘的顶部偏移

时间:2014-02-25 02:56:40

标签: html css

我遇到一个奇怪的问题,表格上面有大约1px的边距,我找不到原因。我也无法在jsbin中重新创建这种情况,所以我不确定是什么导致它。

以下是正在发生的事情的图像: Weird margins

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

2 个答案:

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