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之后添加span，所以我想最简单的做法就是扩展该函数以放置换行符，但是如果有人的话得到了其他想法，或者可以告诉我为什么会发生这种情况（特别是那个！）会很棒。

编辑：

现在通过添加一个向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

要回答您的问题，这就是xHTML的工作原理。如果您有以下内容：

<a href="#">test</a><a href="#">test1</a>

那将显示为

testtest1

如果您有以下内容：

<a href="#">test</a> <a href="#">test1</a>

那将显示为

test test1

现在，相同的逻辑适用于<li>元素，以及各种其他选择器，例如<img>选择器。

您是否有一个标题包含一行中的三个图像，但是当您尝试执行此操作时：

 <img src="#" />
 <img src="#" />
 <img src="#" />

这会在每张图片后面插入一个空格（ ），而将它们排成一行则不会。

您的功能完全符合您的要求。您也可以使用Javascript或CSS完成它，但您的解决方案更好。万一你好奇，这里是用CSS做的：

.menu li:before {
    content:' ';
}

希望有所帮助。

Answer 2

而不是显示：内联，尝试将你的左侧浮动。那么也许：
无：

.menu * {
   display: inline;
}

代替

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

我想我有点其他的东西，但试一试！

Answer 3

如果我理解正确 - 你真正需要的是表格布局。尝试将其添加到css：

.menu { display: table; }
.menu ul { display:table-row; }
.menu li { display:table-cell; }

Answer 4

你可以完全抛弃li标签，只需使用相同的类名使它们成为div。

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

4 个答案: