Question

我正在设计一个从头开始的网站（使用Grails，但那是无关紧要的）。我的菜单栏有问题。我有的形式似乎有一些我无法删除的填充。如果您加载此HTML和CSS，您应该能够看到问题。在左边，有菜单栏，在它下面，有一点间隙。我该如何解决这个问题？

＆＃13;

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

＆＃13;

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

＆＃13;

在Chrome上，有一种解决方法，-webkit-margin-after/before设置为16px，可以覆盖它。但这并不适用于Firefox。

Answer 1

首先，您的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;
}

Answer 2

我手头没有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/

表格间距不正确

2 个答案: