css - 合理的 CSS 菜单在 之间没有换行符时无法工作

Question

我正在为一些 friend 设计一个自定义的 wordpress 模板，并且想要一个水平对齐的顶部菜单。一切都会好起来的，除了 wp_page_menu 在一行中输出所有列表元素，这(经过大量的挠头)似乎打破了格式并删除了元素之间的所有空间。例如，以下输出 1、2 和 3 间隔开，然后一起输出 456。 (在 Mac 上的 Safari、Firefox 和 Chrome 中测试。)

<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

要回答您的问题，这就是 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:' ';
}

希望对您有所帮助。