html - 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:左;.

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