Question

导航栏的底部向左侧走得太远。请帮忙！

这是我的HTML：

// Remove current Copy command
int index = 0;
foreach (CommandBinding item in this.myGrid.CommandBindings)
{
    if (((RoutedCommand)item.Command).Name == "Copy")
    {
        this.myDataGrid.CommandBindings.RemoveAt(index);
        break;
    }
    index++;
}

// Add new Copy command
this.myDataGrid.CommandBindings.Add(xceedCopyCommandBinding);

这是我的css：

<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>

这是我的网站： enter image description here

Answer 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>

Answer 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>

Answer 3

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

或者您可以使用px或％设置宽度和填充。只需确保它们加起来为100.在这里阅读盒子模型：

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

填充：5％; 宽度：90％;

Answer 4

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

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

margin:0 auto;

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

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

我有另一个问题，为什么你将它设置为内联块？

底部导航栏溢出

4 个答案: