Html 如何保证底部没有浮动？

我有一个菜单链接列表，当窗口大小不足以容纳所有链接时，这些链接应该居中。所以我做了这个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;
}

它可以很好地将链接居中，但是

边距底部：25px

不起作用。当链接居中时，因为窗口大小不足以让它们都保持在一条线上，我怎么能使链接有这样的边距呢

---

Edit

页边距不起作用，因为您使用的是

float

，因此包含这些元素的容器将没有预期的高度。有3种解决方案：a）使用填充代替边距（不总是可能）或b）在浮动元素后添加一个空的清除div，类似这样：

或c）添加

溢出：隐藏到容器。你可以通过谷歌搜索“浮动后清除div”来了解更多关于你正在讨论的问题

编辑：现在您已经添加了一个，您可以这样解决您的问题：

.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;
}

我用add
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;}

您可以使用属性


您必须将
显示：内联块
指定给
.centerLevel2>a
而不是
。centerLevel2
如下：

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

您必须使用
display:inline块到锚定标记，用于提供边距

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

检查
你能发布一个演示吗？@Amit添加了一个到JSFIDLE的链接
.centerLevel2 a {
    margin-right: 10px;
    margin-bottom: 55px;
    padding: 7px 10px 6px 15px;
    background: #595959;
    color: #fff;
    text-decoration: none;
    display: inline-block;
}