0

我希望有一个简单的CSS修复。问题很简单，我正在制作一个自定义 wordpress 主题并且我正在使用一些自定义菜单，代码工作正常，但是我制作了一个带有分隔符的内联菜单 css 样式（由左边框：1px 等制成，请参阅 css。）并且有一个显示错误。

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

请参阅jsFiddle 说明生成的 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; }
4

1 回答 1

1

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

我最终只是浮动每个链接，然后使用这种古老的技术创建一个居中的导航菜单 -水平居中无序列表

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

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

于 2012-08-21T22:05:16.920 回答