0

所以我有一个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;
}
4

3 回答 3

3

您的元素应该自然地填充空间，并且不.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;
}
于 2013-11-09T01:20:08.767 回答
1

padding和这个时间无关。你把你的身高设置在一个固定的位置，height我把它改成了它1.74ems，它是正确的。

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

对于屏幕尺寸为设定宽度时的导航折叠，

除非屏幕尺寸为 379 像素宽，否则您无需担心，老实说，除非是移动设备，否则没有屏幕那么小。

在这种情况下，如果您需要支持移动设备并且应该研究media queries.

JSFIDDLE

于 2013-11-09T01:16:46.097 回答
0

我猜这个问题来自你在 1px 中添加的高度nav

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

我将其更改为 1.8em 并解决了

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

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

于 2021-05-27T09:13:17.247 回答