CSS導航欄填充和溢出

Question

所以我有一個CSS樣式的水平導航欄。 我的問題是，欄上似乎有一些底部填充，但我不知道它從哪里來。

此外，當導航欄變得非常狹窄（調整窗口，移動設備等的大小）時，它會從環繞的div中溢出。 我該如何預防？

這是JSFiddle：

http://jsfiddle.net/m8pWa/

CSS：

 html, body {
    margin: 0;
    padding: 0;
    background-color: #E0F2F7;
}
.header {
    margin: 0 auto;
    text-align: center;
    background-color: #81BEF7;
    padding: 1px;
    color: #FAFAFA;
}
ul {
    margin: 0;
    padding: 0;
}
.nav {
    margin: 0 auto;
    padding: 0;
    width: 75%;
    height: 2em;
}
.nav ul li {
    list-style-type: none;
    display: inline;
    overflow: hidden;
}
.nav li a {
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}
.nav li a:hover {
    background: white;
    color: #A4A4A4;
}
.nav-wrapper {
    background-color: #58ACFA;
    padding: 1px;
}
.wrapper {
    margin-right: auto;
    margin-left: auto;
    width: 75%;
}
/* this centers the internal elements */
 .centered {
    text-align: center;
}
/* gives a main content window to the left that is 70% of the main */
 .content {
    width: 70%;
    float:left;
}
/* makes a sidebar to the right that is 30% of the main and floating right */
 .sidebar {
    width: 30%;
    float:right;
}
.sidebar ul {
    padding: 10px;
}

Answer 1

你的元素自然應該填補的空間，並.nav 不應該依賴於一個明確的高度。 這將允許更改諸如font-size ，並防止子代溢出父代。

解決方法如下： http : //jsfiddle.net/m8pWa/3/

刪除.nav的高度。

在.nav li a ，更改display: block; display: inline-block; ，然后刪除float: left; 。

.nav {
    margin: 0 auto;
    padding: 0;
    width: 75%;
}

.nav li a {
    display: inline-block;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

Answer 2

這次與padding無關。 您已將高度設置為固定height我將其更改為1.74ems ，並且已固定。

.nav {
  margin: 0 auto;
  padding: 0;
  width: 75%;
  height: 1.74em;
 }

對於屏幕尺寸為設定寬度的導航崩潰，

除非屏幕尺寸為379像素，您不必擔心，老實說，除非它是移動設備，否則沒有那么小的屏幕。

在這種情況下，如果您需要支持移動設備並應調查media queries 。

的jsfiddle