Question

我已经看到了类似的问题，我一直在努力使代码符合我自己的情况，但我只是没有找到解决这个问题的方法。

我需要一个居中的水平导航栏，其下方有一个带文字的图片。我已经掌握了一切，我无法将整个列表作为一个整体放在页面中心。

这是我的css：

#mainnav { 
width: 100%;
text-align: center; }
#mainnav ul {
list-style-type: none;
text-align: center;}
#mainnav li {
display: inline;
float: left;
text-align: center;
margin-left: 3%;
margin-right: 3%;
margin-top: 10px; }
#mainnav a {
display: block;
margin-right: 0% auto;
padding-left: 0% auto; }

这是我的HTML：

<div id="mainnav">
<ul><li> <a href="about.html"><img src="images/information_sm.png" border="0" /></a>
<a href="about.html">About Us</a> </li>
<li> <a href="progs.html"><img src="images/power_sm.png" border="0" /></a>
<a href="progs.html">Programs and Initiatives</a> </li>
<li> <a href="resources.html"><img src="images/documents_sm.png" border="0" /> </a>
<a href="resources.html">Resources</a> </li>      
<li><a href="feedback.html"><img src="images/mic_sm.png" border="0"></a>
<a href="feedback.html">Feedback</a></li>
<li><a href="faqs.html"><img src="images/help_sm.png" border="0"></a>
<a href="faqs.html">FAQs</a></li>
<li><a href="news.html"><img src="images/announcement_sm.png" border="0"></a>
<a href="news.html">News & Events</a></li></ul>
</div>

所以我有一个图标，然后在它下面就是文字。那些相对于彼此居中，但整个事情需要集中在页面上。

我很接近，但由于李的“保证金左：5％;保证金权利：5％”规格，它分散得太多了。如果我改变它，它会向左滑动。如何让它居中并让它不那么宽，每个列表项之间有如此多的空间？

另外，是的，我确实需要灵活的宽度，因为我的工作要求我正在构建此页面。谢谢！

Answer 1

您需要按如下方式更改您的CSS：您不能水平对齐浮动元素

#mainnav { 
width: 100%;
text-align: center; }
#mainnav ul {
list-style-type: none;
text-align: center;}
#mainnav li {
display: inline-block;
text-align: center;
margin-left: 3%;
margin-right: 3%;
margin-top: 10px; }
#mainnav a {
display: block;
margin-right: 0% auto;
padding-left: 0% auto; }

请参阅http://jsfiddle.net/FM2df/1/了解结果

灵活宽度页面上的列表中心水平导航栏

1 个答案: