对齐的 CSS 菜单在 <li> 之间没有换行符时不起作用答案

【问题标题】：Justified CSS menu not working without line breaks between <li>对齐的 CSS 菜单在 <li> 之间没有换行符时不起作用
【发布时间】：2010-09-21 04:28:10
【问题描述】：

我正在为一些朋友设计一个自定义的 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');

【问题讨论】：

标签： css wordpress menu

【解决方案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="#" />

这将在每张图片后插入一个空格 (&nbsp;)，而将它们排成一行则不会。

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

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

希望有所帮助。

【讨论】：

【解决方案2】：

尝试将您的 lis 向左浮动，而不是 display:inline。那么也许：
没有：

.menu * {
   display: inline;
}

改为

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

我想我有点用其他东西来点缀，但试试看吧！

【讨论】：

感谢您的建议，但将其向左浮动会将它们全部压在左侧而不是将它们分散开来。（而且我已经有很多其他格式，为了清楚起见，我只是在这里删除了它。）
你需要给 div.menu 一个宽度，然后给你的左边和/或右边的边距或填充。你也可以疯狂地在 div.menu 中添加一个容器，我们称之为 div.menu-container 并给它一个文本对齐中心，然后给 div.menu 一个 margin:0 auto;宽度为 700px 和 text-align:left;例如，为了。这将在 ie 和 firefox/webkit 中为您提供一个中心浮动菜单

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

你可以完全放弃 li 标签，让它们成为具有相同类名的 div。

【讨论】：