我正在尝试创建我自己的 CSS 菜单栏,我学到了很多东西。不幸的是,我被困在这一件上,我不知道如何解决它。我的菜单栏太长,所以我使用换行符将每个菜单元素环绕起来,但它不允许我的菜单跨菜单栏运行。你能告诉我我在这里缺少什么吗?
<div id="menucontainer">
<ol id="navlinks">
<li><a href="#">COMPANY<br />OVERVIEW</a></li>
<li><a href="#">CLIENTS<br />TESTIMONIALS</a></li>
<li><a href="#">ACCREDITATION<br />SERVICES</a></li>
<li><a href="#">LEGAL<br />SUPPORT</a></li>
<li>TRAINING</li>
<li><a href="#">CONSULTING<br />SERVICES</a></li>
<li><a href="#">FREE<br />POLICY CENTER</a></li>
<li><a href="#">IN THE NEWS</a></li>
<li><a href="#">STRATEGIC<br />PARTNERS</a></li>
</ol>
</div>
CSS 代码:
/* We set the width and color of the background for a menu wrapper. */
#menucontainer{width: 1021px; height: 61px; background-color:#0C318C; margin: auto; padding-top:5px;}
/* We target the top of the order list and remove the list properties. */
#navlinks li {display: inline; list-style: none;}
/* This line sets the font style of the bullet menu */
ol{font-size: 12px; font-family: 'Tinos', serif;line-height: 18px;}
/* We target the li items with and without a hyper link and color the font white. */
li, li a {text-decoration: none; color: white;}
我把它放在 JFiddle 上,你可以在这里找到它:http://jsfiddle.net/L4sTB/
谢谢, 弗兰克·G.
最佳答案
检查这个fiddle .
我更改了以下 CSS 规则。
#navlinks li {
display: inline-block; /* to display the menu items as blocks in same line */
list-style: none;
text-align: center; /* center align the text within the block */
width: 10%; /* set each block a width */
vertical-align: middle; /* align the contents to middle vertically */
}
关于html - CSS 导航栏环绕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18173747/