[英]CSS Nav Bar wrapping around
我正在嘗試創建自己的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。
檢查這個小提琴 。
我對以下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 */
}
您可以將display:inline-block
為li
元素,它將跨越導航欄的寬度: http : //jsfiddle.net/shaunp/L4sTB/3/
這是您想要的效果嗎?
該列表應為inline-block
。 我為每個文本添加了居中對齊文本和邊框。
#navlinks li {display: inline-block; list-style: none;text-align:center;border: 1px solid white;}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.