窗體間距不正確

我正在從頭開始設計一個網站（使用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

窗體間距不正確

回答

相關問題