Question

firefox上的一切看起来都很好，但是Chrome显示菜单大约低两倍。这里有实时链接 http://soloveich.com/project2/

<div class="row">
<div class="col-lg-12" id="desc">
<?php bloginfo('description'); ?>
</div>
</div>


<div class="row">
             <div class="col-lg-12" id="mn">
                <ul>
<li><?php wp_nav_menu( array( 'theme_location' => 'main-menu'  ) ); ?></li>
</ul>
             </div> 
</div>

CSS

#desc {
margin-top: 15px;
text-align: center;
}

#mn {
margin-top: 15px;
padding-bottom: -5px;
text-align: center;
border-bottom-style: solid;
border-bottom-width: 2px;
}
#mn ul {
list-style-type: none;
margin: 0;
    padding: 0;
}
#mn ul li {
display: inline;
text-align: center;
padding-right: 5px;
}

我该如何解决？

Answer 1

将ul与单li更改为div，事情稍微稳定下来。

在不需要时使用列表并不是一种好习惯。首先，它会造成不必要的混乱代码。另一方面，它使屏幕阅读器用户的页面导航变得奇怪。

那就是说，我不确定为什么Chrome会将单个li和子div放在不同的行上。您可以通过摆弄显示状态来解决这个问题。

Chrome边距与ie和ff不同

1 个答案: