Question

我有一个菜单链接列表，当窗口大小不足以将它们全部保存在一行时，这些链接应居中。所以我制作了这个CSS：

.aboutLevel2,
.centerLevel2 {
  float: left;
  width: 100%;
  text-align: center;
  display: inline;
}
.centerLevel2 a {
  margin-right: 10px;
  margin-bottom: 25px;
  padding: 7px 10px 6px 15px;
  background: #595959;
  color: #fff;
}

它使链接中心很好，但margin-bottom: 25px不起作用。如果链接位于中心位置，我怎么能让链接具有那种边距，因为窗口大小不足以让它们全部停留在一条线上？

修改 http://jsfiddle.net/rvwzcjzq/

Answer 1

边距不起作用，因为您正在使用float，因此包含这些元素的容器将不具有预期的高度。有3种解决方案：a）使用填充而不是边距（并非总是可行）或b）在浮动元素之后添加空清除div，如下所示：<div style="clear:both;"></div>或c）将overflow:hidden;添加到容器。您可以通过Google搜索“在浮动后清除div”了解您正在讨论的问题的更多信息

修改：既然您已添加了jsFiddle，就可以解决问题：

.aboutLevel2, .centerLevel2 {
    float: left;
    width: 100%;
    text-align: center;
}
.centerLevel2 a {
    margin-right: 10px;
    display:inline-block;
    margin-bottom:20px;
    padding: 7px 10px 6px 15px;
    background: #595959;
    color: #fff;
    text-decoration: none;
}

Answer 2

我通过向您的链接添加display: block;来解决您的问题：

.centerLevel2 a {
display: inline-block;
margin-right: 10px;
margin-bottom: 55px;
padding: 7px 10px 6px 15px;
background: #595959;
color: #fff;
text-decoration: none;}

Answer 3

您可以使用line-height属性

JSFiddle

{{1}}

Answer 4

您必须向display:inline-block提供.centerLevel2 > a而不是.centerLevel2这样： Demo

.centerLevel2 > a {
    margin: 0px 10px 55px 0;
    padding: 7px 10px 6px 15px;
    background: #595959;
    color: #fff;
    text-decoration: none;
     display: inline-block;
}

Answer 5

您必须使用display: inline-block;锚定标记以获得保证金。

.centerLevel2 a {
    margin-right: 10px;
    margin-bottom: 55px;
    padding: 7px 10px 6px 15px;
    background: #595959;
    color: #fff;
    text-decoration: none;
    display: inline-block;
}

检查Updated Fiddle

如何保持底部没有浮动？

5 个答案: