合理的CSS菜单在<li>之间没有换行符时无法正常工作

Question

我正在为一些朋友设计一个自定义wordpress模板,并想要一个水平对齐的顶级菜单.一切都会好的,除了wp_page_menu在一行中输出所有列表元素,这(在很多头疼之后)似乎打破了格式并删除了元素之间的所有空间.例如,以下输出1,2和3间隔开,然后456一起.(在Safari,Firefox和Chrome上测试,全部在Mac上.)

<style>

.menu {
    text-align: justify;
    width: 700px;
    margin: 10px;
}

.menu * {
    display: inline;
}

.menu span {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 0;
}

</style>

<div class="menu">
    <ul>
        <li><a href="http://localhost/">1</a></li>
        <li><a href="http://localhost/">2</a></li>
        <li><a href="http://localhost/">3</a></li>
        <li><a href="http://localhost/">4</a></li><li><a href="http://localhost/">5</a></li><li><a href="http://localhost/">6</a></li>
    </ul>
    <span></span>
</div>

我已经有了一个自定义函数来编辑wp_page_menu的输出以在ul之后添加跨度,所以我想最简单的做法就是扩展该函数以放置换行符,但是如果有人有其他想法的话,或者可以告诉我为什么会发生这种情况(特别是那个!)会很棒.

编辑:

现在通过添加一个向html插入空格的函数来修复它(下面的代码如果有人现在感兴趣或将来有人遇到这个).似乎这就是必要的!仍然有兴趣听听是否有人能告诉我为什么需要这样做.

// Add a space after the </li> in wp_page_menu to allow justification of the menu
function add_break($break) {
    return preg_replace('/<\/li>/', '</li> ', $break, -1);
}
add_filter('wp_page_menu','add_break');

Answer 1

尝试将列表向左浮动，而不是显示：内联。那么也许：
不：

.menu * {
   display: inline;
}

反而

.menu li{
   float:left;
   padding:0 5px;
   list-style:none;
}

我想我有点用其他东西装饰，但试试吧！