Question

所以我有一个用CSS设计的水平导航栏。我的问题是，酒吧似乎有一些底部填充，但我不知道它来自哪里。

此外，当导航栏变得非常狭窄（调整窗口，移动设备等）时，它会从环绕的div中溢出。我该如何防止这种情况？

这是JSFiddle：

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

Answer 3

我猜问题出在您在nav

中添加的 1px 的高度

    margin: 0 auto;
    padding: 0;
    width: 75%;
    height: 2em;
}

我把它改成 1.8em 就解决了

    margin: 0 auto;
    padding: 0;
    width: 75%;
    height: 1.8em;
}

这也取决于显示器，它们的显示尺寸不同

CSS导航栏填充和溢出

3 个答案: