Question

如何将包含display：block但仍全部浮动到一边的元素的未知宽度元素居中？

基本上我有一个菜单，其中有许多项目有display：block（因为它们需要有适当的填充），但都在一行中。

我做了一个example on jsFiddle，其中绿色菜单必须在粉红色元素内居中，粉红色元素必须适应绿色菜单的高度。

编辑：抱歉，错误示例，使用正确的示例更新

Answer 1

我修补了你的一点点。这是你在找什么？绿色以粉红色为中心，悬停在绿色上突出显示青色块。 float: left行也适用于您最初拥有的相同选择器...

#page {
   background: yellow;  
   text-align: center; 
   width: 100%;
   float: left;
}
#mainmenu {
    background: pink;
    padding: 5px;
    width: 400px;
    text-align: center;
}
#mainmenu ul {
    background: green;
    display: inline-block;
}
#mainmenu li {
   display: inline-block;
   padding: 5px 10px 5px 10px;
   float: left;
}
#mainmenu a, #mainmenu a:visited {
   color: #ffffff;
   font-size: 12px;
   text-align: center;
   text-decoration: none;    
}
#mainmenu li:hover {
   background: cyan;        
}

Demo

Answer 2

使用display: inline-block可以实现浮动，而不是使用浮点数。

所以#mainmenu li会变成：

#mainmenu li {
   display: inline-block;
   *display: inline;      /* add this for IE7 as it does not */
   *zoom: 1;              /* support display: inline-block */   
}

示例JsFiddle：http://jsfiddle.net/SKLZ7/6/

Answer 3

你正在使用浮动，所以其他元素会漂浮在它周围。您必须关闭其余部分的浮动。使用clear:both属性将其关闭。

如上所述[{3}}，您可以在列表后添加<div style="clear:both;"></div>。

CSS：以包含浮动元素的元素为中心

3 个答案: