Question

this website上的菜单不符合预期。

这可能是一个重新发布，虽然我已经阅读了此问题的所有先前的解决方案......它现在正在打破我的大脑。

我目前正在使用这种CSS技术来证明菜单元素的合理性：

<ul class="justified"><li>Element</li></ul>

http://jsfiddle.net/89bnF/77/

关于CSS技巧（最后一项技术）的解释：

https://css-tricks.com/equidistant-objects-with-css/

我一直在不同的网站上使用此解决方案，现在我在Wordpress更新后遇到此问题。（升级后第一次出现主题问题。）

感谢您的帮助，

更新＃1

从Pangloss的回答来看，WordPress正在生成<li>元素而不用空格分隔它们。这是一种奇怪的行为......我通过手动添加缺少的空格来解决问题。

  $menu = wp_nav_menu($defaults);
  $menu = str_replace("</li><li", "</li> <li", $menu);

Answer 1

text-align:justify定位技巧需要在标记中的子项之间包含空格（空格）。

在以下示例中，它可以正常工作，因为<li>标记之间有空格。

＆＃13;

ul {
  text-align: justify;
  padding: 0;
}
li {
  display: inline-block;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

＆＃13;

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

＆＃13;

但是，它在以下示例中不起作用，因为它们之间没有空白区域，尽管CSS与上面的完全相同。与WordPress生成的代码存在同样的问题。

＆＃13;

ul {
  text-align: justify;
  padding: 0;
}
li {
  display: inline-block;
}
ul:after {
  content: '';
  display: inline-block;
  width: 100%;
}

＆＃13;

<ul><li>1</li><li>2</li><li>3</li></ul>

＆＃13;

但是，还有其他方法，例如使用Modern CSS3 flexbox 。

＆＃13;

ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 0;
}

＆＃13;

<ul><li>1</li><li>2</li><li>3</li></ul>

＆＃13;

水平菜单证明了项目的定位

1 个答案: