将链接置于导航栏中心(Centre the links in a navigation bar)
如何将链接本身置于导航栏中心?
边框是流畅的,导航按钮重新排列到不同的屏幕尺寸,但我不能让它们在中间,而是总是在左边。
我的HTML:
<div id="centerment"> <div id="navigation"> <div id="menu4"> <ul> <li><a href="index.html"> <span class="title"><strong>HOME</strong></span></a> </li> <li><a href="about.html"> <span class="title"><strong>ABOUT</strong></span></a></li> <li><a href="wood.html"> <span class="title"><strong>WOOD</strong></span> </a> </li> <li><a href="contact.html"> <span class="title"><strong>CONTACT</strong></span></a></li> </ul> </div>我的CSS:
所有3个响应大小:(移动,平板电脑和桌面)。
#centerment { position:relative; clear: both; float: left; margin-left: 0px; margin-right: 0px; width: 100%; display: block; } #menu4 ul { list-style: none; font-family: "corbert regular regular"; font-size: 10px; letter-spacing: 2px; line-height: 1.2em; float: left; clear: left; border-bottom: 1px solid #000; border-top: 1px solid #000; } #menu4 ul li{ float: left; } #menu4 ul li a{ display: inherit; text-decoration: none; color: #000000; text-align: center; margin-left: 0 auto; margin-right: 0 auto; padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; width: 170px } #menu4 ul li a span{ display:inherit; } #menu4 ul li a span.title{ } #menu4 ul li a:hover span.title{ color: #000000; } #menu4 ul li a span.text{ padding: 0px 5px; font-family: "corbert regular regular"; font-size: 13px; font-style: normal; font-weight: 300; letter-spacing: normal; line-height: 1.6em; color: #000000; visibility: hidden; } #menu4 ul li a:hover span.text{ visibility:visible; } .gridContainer.clearfix #navigation #menu4 ul li a .title { font-family: Corbert; }非常感谢提前!
How do you centre the links themselves in the navigation bar?
The border is fluid and the nav buttons rearrange themselves to different screen sizes but I just can't get them to be in the middle, instead they are always on the left.
My HTML:
<div id="centerment"> <div id="navigation"> <div id="menu4"> <ul> <li><a href="index.html"> <span class="title"><strong>HOME</strong></span></a> </li> <li><a href="about.html"> <span class="title"><strong>ABOUT</strong></span></a></li> <li><a href="wood.html"> <span class="title"><strong>WOOD</strong></span> </a> </li> <li><a href="contact.html"> <span class="title"><strong>CONTACT</strong></span></a></li> </ul> </div>My CSS:
In all 3 responsive size: (mobile, tablet and desktop).
#centerment { position:relative; clear: both; float: left; margin-left: 0px; margin-right: 0px; width: 100%; display: block; } #menu4 ul { list-style: none; font-family: "corbert regular regular"; font-size: 10px; letter-spacing: 2px; line-height: 1.2em; float: left; clear: left; border-bottom: 1px solid #000; border-top: 1px solid #000; } #menu4 ul li{ float: left; } #menu4 ul li a{ display: inherit; text-decoration: none; color: #000000; text-align: center; margin-left: 0 auto; margin-right: 0 auto; padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; width: 170px } #menu4 ul li a span{ display:inherit; } #menu4 ul li a span.title{ } #menu4 ul li a:hover span.title{ color: #000000; } #menu4 ul li a span.text{ padding: 0px 5px; font-family: "corbert regular regular"; font-size: 13px; font-style: normal; font-weight: 300; letter-spacing: normal; line-height: 1.6em; color: #000000; visibility: hidden; } #menu4 ul li a:hover span.text{ visibility:visible; } .gridContainer.clearfix #navigation #menu4 ul li a .title { font-family: Corbert; }Many many thanks in advance!
最满意答案
将包含元素的set设置为text-align:center; 然后将li设置为display:inline-block; 如果a标签上没有浮动,则应该这样做。
set containing element to text-align: center; then set the li's to display: inline-block; if there are no floats on the a tags this should do it.
更多推荐
发布评论