CSS 导航栏填充和溢出答案

【问题标题】：CSS Nav Bar Padding and OverflowCSS 导航栏填充和溢出
【发布时间】：2021-05-27 17:13:17
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

很好的答案！不依赖于高度的导航很有启发性。我现在如何删除按钮周围的小边框？
感谢@Aristides 的反馈。现在检查边境。
.nav-wrapper { padding: 1px; }...删除它;）

【解决方案2】：

这次与padding 无关。您已将身高设置为修复 height 我将其更改为 1.74ems 并且它是正确的。

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

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

除非屏幕尺寸为 379 像素宽度，否则您无需担心，老实说，除非是移动设备，否则任何屏幕都不会那么小。

在这种情况下，如果您需要支持移动设备，请查看media queries。

JSFIDDLE

【讨论】：

我一定会调查媒体查询，谢谢。（如果允许，我会在 3 分钟内接受）
它们非常好用且易于使用！我很高兴能在您的设计中提供帮助并祝您好运。这是一个很好的指南，css-tricks.com/css-media-queries。

【解决方案3】：

我猜问题出在你在nav中添加的1px高度

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

我把它改成 1.8em 就解决了

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

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

【讨论】：