我正在从头开始设计一个网站(使用 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 设置为 16px，它可以被覆盖。但这在 Firefox 上不起作用。
最佳答案
首先，您的 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;
}
关于html - 表格间距不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34365080/