表格间距不正确

时间:2015-12-18 22:46:35

标签: html css

我正在设计一个从头开始的网站(使用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>
&#13;
&#13;
&#13;

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

2 个答案:

答案 0 :(得分:1)

首先,您的HTML格式不正确:form不应介于ulli之间。像这样重新排序:

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

答案 1 :(得分:0)

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