html - 如何定位已经有浮动的 div？

Question

我有一组 div 设置为 float:left 并且我希望它们彼此对齐但仍然居中，这就是我目前拥有的：

HTML

<div style="display: inline; text-align:center;">
    <div id="generalmenu">
        test
    </div>
    <div id="generalmenu">
        test
    </div>
    <div id="generalmenu">
        test
    </div>
</div>

CSS

#phonicmenu { 
    background: white; 
}
#generalmenu { 
    background: white; 
    width:270; 
    padding: 25px; 
    float:left; 
    margin-left: auto; 
    margin-right: auto; 
}

关于如何将这些菜单居中的任何想法？

编辑：添加了一个带有主体的 JS Fiddle，这样您就可以更清楚地看到问题。 http://jsfiddle.net/aYWwM/

Answer 1

问题还在于您将divs 用于它们不适合的目的。div 是块元素。您想将内容显示为内联元素，因此您应该使用spanor 无序列表。

要做你需要的，只需创建一个包装 div 并将其margin-left设置margin-right为auto. 包装器应包含您需要的内联元素...请参阅此 jsFiddle