窗体间距不正确

我正在从头开始设计一个网站（使用Grails，但这是无关紧要的）。我的菜单栏出现问题。我的表格似乎有某种我无法删除的填充。如果你加载这个HTML和CSS，你应该能够看到问题。左边是菜单栏，下面有一个小小的差距。我怎样才能解决这个问题？窗体间距不正确

body{ 
 
    margin: 0px; 
 
} 
 

 
.body { 
 
    padding:20px; 
 
    margin-top:30px; 
 
} 
 

 
.menu { 
 
    margin: 0; 
 
    padding: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    position: fixed; 
 
    background-color: #333; 
 
} 
 

 
.menu ul { 
 
    list-style-type: none; 
 
    overflow: hidden; 
 
    display: inline; 
 
    -webkit-margin-before: 0px; 
 
    -webkit-margin-after: 0px; 
 
} 
 

 
/* Navigation */ 
 

 
.menu .nav li { 
 
    float: left; 
 
} 
 

 
.menu .nav li a { 
 
    display: block; 
 
    color: white; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 

 
.active { 
 
    background-color: #4CAF50; 
 
} 
 

 
.menu .nav a:hover:not(.active) { 
 
    background-color: #111; 
 
} 
 

 
/* User */ 
 

 
.menu .login { 
 
    float: right; 
 
} 
 

 
.menu .login form { 
 
    padding-top: 10px; 
 
    padding-right: 16px; 
 
    display: inline; 
 
} 
 

 
.menu .login li { 
 
    display: inline; 
 
} 
 

 
.menu .login form li input[type="submit"]{ 
 
    border: none; 
 
    background-color: #4CAF50; 
 
}

<html xmlns:g="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title> 
 
     Neon Orb 
 
    </title> 
 
    <link rel="stylesheet" href="main.css" type="text/css"> 
 

 

 
    <meta name="layout" content="main"/> 
 

 
</head> 
 
<body onload=""> 
 
<div class="menu"> 
 
    <ul class="nav"> 
 
     <li> 
 
      <a href="/" class="active"> 
 
       Home 
 
      </a> 
 
     </li> 
 
     <li> 
 
      <a href="/about" class=""> 
 
       About 
 
      </a> 
 
     </li> 
 
    </ul> 
 

 
     <ul class="login"> 
 
      <form action="/user/login" method="post" name="login" id="login" > 
 
       <li> 
 
        <input type="text" name="username" placeholder="Username" value="" id="username" /> 
 
       </li> 
 
       <li> 
 
        <input type="password" name="password" placeholder="Password" value="" id="password" /> 
 
       </li> 
 
       <li> 
 
        <input type="submit" name="_action_Login" value="Login" /> 
 
       </li> 
 
      </form> 
 
     </ul> 
 

 

 
</div> 
 
<div class="body"> 
 

 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 

 
</div> 
 
</body> 
 
</html>

在Chrome，有一种变通方法，-webkit-margin-after/before被设置为16像素，它可以被覆盖。这虽然不适用于Firefox。

来源

2015-12-18 Chris Smith

的可能的复制[-webkit-利润率增加了对文本不必要的保证金（http://stackoverflow.com/questions/5721966/webkit-margin-adds-unwanted-margin-on-texts） – Stickers

首先，你的HTML没有很好地形成：一个form不应该是ul和li之间。重新排序是这样的：

<form action="/user/login" method="post" name="login" id="login" > 
     <ul class="login"> 
      <li> 
       <input type="text" name="username" placeholder="Username" value="" id="username" /> 
      </li> 
      <li> 
       <input type="password" name="password" placeholder="Password" value="" id="password" /> 
      </li> 
      <li> 
       <input type="submit" name="_action_Login" value="Login" /> 
      </li> 
    </ul> 
</form>

然后，这个描述符添加到CSS：

.menu form ul { 
    margin: 0; 
}

来源

2015-12-18 23:03:48

我不知道是什么原因Firefox是不能起飞的填充，但你可以重置添加到您的CSS的顶部，它应该工作：

*{ 
margin:0; 
}

来源

2015-12-18 22:58:58 Froy

FireFox不是webkit，所以'-webkit -' CSS规则被忽略。 – 11684

我没有手头有一个Firefox ，但简单地设置margin而不是-webkit-margin-after似乎在Safari中诀窍。

.menu ul { 
    list-style-type: none; 
    overflow: hidden; 
    display: inline; 
    margin:0; 
    /* -webkit-margin-before: 0px; 
    -webkit-margin-after: 0px;*/ 
}

测试自己：

https://jsfiddle.net/6fznv14v/

来源

2015-12-18 23:01:31

窗体间距不正确

回答

相关问题