底部导航栏溢出答案

【问题标题】：Bottom Navigation Bar Overflows底部导航栏溢出
【发布时间】：2016-08-05 18:23:39
【问题描述】：

我的导航栏底部太偏左了。请帮忙！

这是我的html：

<div id="bottem">

  <h4>Made by xyz 2016</h4>
  <h5>With lots of help from Develop Academy </h5>
  <h5><a href="info.html" id="info">More Info</a></h5>

</div>

这是我的 CSS：

#bottem {
  margin-right: 10px;
  margin-left: 10px;
  background-color: rgba(51, 126, 198, 0.28);
  display: inline-block;
  width: 100%;
}

这是我的网站： enter image description here

【问题讨论】：

...你的意思是“向右走”？

标签： html css navigation navbar

【解决方案1】：

使用 css padding 属性，如下面的代码所示。 padding 属性用于从左侧围绕其内容生成空间。如果你想从各个方向生成空间，那么只需使用padding，例如。 padding:20px.

#bottem {
  padding:5px 20px; /*5px = top & bottom, 20px = left & right;*/
  background-color: rgba(51, 126, 198, 0.28);
}

<div id="bottem">

  <h4>Made by xyz 2016</h4>
  <h5>With lots of help from Develop Academy </h5>
  <h5><a href="info.html" id="info">More Info</a></h5>

</div>

【讨论】：

填充使溢出变大
@xXWONTONXx 要修复溢出，请添加box-sizing: border-box; 或删除width: 100%; 和display: inline-block;

【解决方案2】：

在这种情况下，您需要有一个可以在不影响外部元素宽度的情况下进行填充的内部元素。

#bottom {
  background-color: rgba(51, 126, 198, 0.28);
  display: inline-block;
  width: 100%;
}
#bottom-inner {
  margin-right: 10px;
  margin-left: 10px;
  background-color: rgba(51, 126, 198, 0.28);
}

<div id="bottom">
  <div id="bottom-inner">
    <h4>Made by xyz 2016</h4>
    <h5>With lots of help from Develop Academy </h5>
    <h5><a href="info.html" id="info">More Info</a></h5>
  </div>
</div>

【讨论】：

【解决方案3】：

由于您的宽度为 100%，因此您的填充只会使宽度变大。这就是它溢出的原因。你可以摆脱你的填充。或者您可以使用像素设置宽度。

或者您可以使用 px 或 % 设置宽度和填充。只需确保它们加起来为 100。在此处阅读有关盒子模型的信息：

http://www.w3schools.com/css/css_boxmodel.asp

填充：5%；宽度：90%；

【讨论】：

试试这个：#bottem { background-color: rgba(51, 126, 198, 0.28);显示：内联块；填充：5%；宽度：90%； }

【解决方案4】：

这是一个非常容易解决的问题，哈哈。

您的左右边距设置为 10 像素，但元素有自己的自然边距。其他答案确实解决了其中一些问题，但要保持 div 居中，最好只使用

margin:0 auto;

这将使浏览器消除顶部和底部边距并计算其余部分以使您的 div 在视口中居中。

另外，如果这不能解决您的问题，请提供更多详细信息。

我还有一个问题，你为什么将它设置为 inline-block？

【讨论】：