html - Wordpress wp_nav_menu 仅在使用自定义菜单时中断链接布局

Question

我希望有一个简单的 css 修复程序。问题很简单，我正在制作一个自定义的 wordpress 主题，我正在使用一些自定义菜单，代码工作正常，但我制作了一个带有分隔符的内联菜单 css 样式(由 border-left: 1px 等制成，请参阅 css。)并且存在显示错误。

当它是默认的 wordpress 菜单(wordpress 页面列表)时，菜单显示正常，但是当我使用 wordpress 管理面板中的菜单编辑器插入自定义链接时，分隔符被某种空格插入!

参见 jsFiddle illustrating the problem对于生成的 html

函数.php

register_nav_menus(
    array( 'header-menu' => __( 'Header Menu' ), 'footer-menu' => __( 'Footer Menu' ))
);

页脚.php

<div id="last-footer">
<div id="last-footer-container" class="container_12">
    <div id="last-footer-menu" class="grid_12" align="center">
        <?php 
            wp_nav_menu( array( 'theme_location' => 'footer-menu' ) );
        ?>  
    </div>  
    <div class="clear"></div>
          <!-- other stuff here (widgets) -->
</div><!-- #last-footer-container end -->

style.css(用 lesscss 生成 :P)

#last-footer {
  background:#222;
  color:white;
}
#last-footer-container {
  padding-bottom:10px;
  padding-top:10px;
}
#last-footer-container a { color:#a62e0d; }
#last-footer-container a:hover {
  text-decoration:none;
  color:#602000;
  text-shadow:1px 1px 1px black;
}
#last-footer-container span { float:left; }

#last-footer-menu ul {
  margin:0;
  padding:0;
}
#last-footer-menu ul li {
  border-left:1px solid #121212;
  border-right:1px solid #323232;
  display:inline;
  padding-left:10px;
  padding-right:10px;
  margin:0;
}
#last-footer-menu ul li:first-child { border-left:none; }
#last-footer-menu ul li:last-child { border-right:none; }

Answer 1

我想我应该看看这个，结果也让我抓狂。该问题与 #last-footer-menu ul li 选择器上的 display: inline 有关。

我最终只是 float 了每个链接，然后使用这种古老的技术创建了一个居中的导航菜单 - Horizontally centering an unordered list

这是 JS Fiddle -> http://jsfiddle.net/rabmcnab/zvCsC/1/

我希望看到一些更简洁、更简洁的解决方案，我们将看看是否有人考虑使用更少的 CSS 更改来实现的替代方案。