Question

我希望有一个简单的CSS修复。问题很简单，我正在制作一个自定义wordpress主题，我正在使用一些自定义菜单，代码工作正常，但我已经制作了带分隔符的内联菜单css样式（由border-left制作：1px等，看到css。）并且有一个显示错误。

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

有关生成的html

，请参阅jsFiddle illustrating the problem

的functions.php

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

footer.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

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

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

这是JS小提琴 - ＆gt; http://jsfiddle.net/rabmcnab/zvCsC/1/

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

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

1 个答案: