0

我正在尝试创建自己的 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。

4

3 回答 3

2

检查这个小提琴。

我对以下 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 */
}
于 2013-08-11T16:01:47.093 回答
1

列表应该是inline-block. 我为每个添加了居中对齐文本和边框。

#navlinks li {display: inline-block; list-style: none;text-align:center;border: 1px solid white;}
于 2013-08-11T16:07:27.970 回答
1

您可以设置display:inline-block您的li元素，它将跨越导航栏的宽度：http: //jsfiddle.net/shaunp/L4sTB/3/

这是你想要的效果吗？

于 2013-08-11T16:01:19.703 回答