将navmenu集中在一个div内 [英] Centering navmenu within a div
本文介绍了将navmenu集中在一个div内的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个下拉菜单,我需要在一个div中居中,但text-align:center不适合我。
该网站是在 http://www.joekellywebdesign.com/churchsample1/index.html
HTML
< div id = navmenudiv>
< ul id =navmenu>
< li>< a href =index.html>主页< / a>< / li>
< li>
< a href =about.html>关于我们< / a>
< ul class =sub1>
< li>< a href =introduction.html>简介< / a>< / li>
< li>< a href =whoweare.html>我们是谁< / a>< / li>
< li>< a href =staff.html>员工< / a>< / li>
< / ul>
< / li>
< li>
< a href =services.html>服务< / a>
< ul class =sub1>
< li>< a href =sundaymorning.html>星期天上午< / a>< / li>
< li>< a href =sundayevening.html>星期日晚上< / a>< / li>
< li>< a href =wednesday.html>周三晚上< / a>< / li>
< / ul>
< / li>
< li>< a href =resources.html>资源< / a>< / li>
< li>< a href =contact.html>与我们联系< / a>< / li>
< li>< a href =news.html>新闻与活动< / a>< / li>
< / ul>
< / div>
CSS
navmenudiv {
z-index:60;
保证金:-30px 0;
height:50px;
背景颜色:#5340BF;
top:40;位置:
relative;
text-align:center;
解决方案
这是一个简单的解决方案:
ul#navmenu li {
float:left; / * REMOVE * /
display:inline-block; / * ADD * /
}
目前, li
是浮动的。如果你已经在使用 text-align:center
。
更新的CSS:
ul#navmenu li {
margin-right:4px;
text-align:center;
width:125px;
display:inline-block;
职位:亲属;
}
I have a drop down nav menu that I need to be centered within a div but text-align: center isn't working for me.
The site is at http://www.joekellywebdesign.com/churchsample1/index.html
HTML
<div id="navmenudiv">
<ul id="navmenu">
<li><a href="index.html">Home</a></li>
<li>
<a href="about.html">About Us</a>
<ul class="sub1">
<li><a href="introduction.html">Introduction</a></li>
<li><a href="whoweare.html">Who We Are</a></li>
<li><a href="staff.html">Staff</a></li>
</ul>
</li>
<li>
<a href="services.html">Services</a>
<ul class="sub1">
<li><a href="sundaymorning.html">Sunday Morning</a></li>
<li><a href="sundayevening.html">Sunday Evening</a></li>
<li><a href="wednesday.html">Wednesday Evening</a></li>
</ul>
</li>
<li><a href="resources.html">Resources</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li><a href="news.html">News and Events</a></li>
</ul>
</div>
CSS
navmenudiv {
z-index:60;
margin: -30px 0;
height:50px;
background-color:#5340BF;
top:40;position:
relative;
text-align:center;
}
解决方案
Here is an easy solution:
ul#navmenu li {
float:left; /* REMOVE */
display: inline-block; /* ADD */
}
Currently, the li
are floating. By changing them to inline-block
elements, they will center - given that you are already using text-align:center
on the parent.
Updated CSS:
ul#navmenu li {
margin-right: 4px;
text-align: center;
width: 125px;
display: inline-block;
position: relative;
}
这篇关于将navmenu集中在一个div内的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文