水平居中/均匀分布.在< ul>内部在< div>内 [英] Horizontally centering/evenly distributed <li> inside of <ul> inside a <div>
问题描述
具有导航栏<div>，内部是<ul>，每个<li>包含带有链接的<a>(用于导航栏)
Have a Navbar <div>, inside is a <ul> and each <li> contains a <a> with a link (this is for a navigation bar)
我在google和这个网站上浏览时，找不到我想要的东西.
I looked on google and this site and i couldnt find exactly what i was looking for.
我想要的是能够保持当前样式(在内部使用<li>和<a>)，并且我希望<li>均匀分布并居中(如果它们均匀，则自然而然地出现) <ul>(位于导航栏<div>内部).
What i want is to be able to keep my current style (using <li> with <a>'s inside) and i want the <li> to be evenly distributed and centered (this part comes naturally if they are evenly distributed...) inside the <ul> (which is inside the navbar <div>).
无论如何，如果没什么意思，请告诉我，目前他们只是左对齐...这里是我拥有的:
Anyways if that doesnt make sense let me know, currently they are just left aligned...Heres what i have:
HTML:
<div class="navbar">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>
CSS:
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0px;
padding: 0px;
width: 90%;
overflow: hidden;
}
.navbar li{
float: left;
padding: 2px;
width: 150px;
margin-left: auto ;
margin-right: auto ;
}
如果需要，我还可以包含.navbar a {}. 我对CSS非常陌生，因此请放轻松，我也确实在SO和Google上四处浏览，却找不到类似的东西(尽管也许由于我是新来的，所以我没有意识到它是一样的.)
I can also include my .navbar a{} if that is neccesary. I am very new to CSS so go easy, also I did look all over SO and Google first and couldnt find anything quite like this (Although maybe since I am new i dont realize its the same).
如果这是错误的CSS方法和/或存在更简单，更常用的方法.继续并链接/发布它，但是我更喜欢这种方式，因为这对我来说最有意义.
If this is a faulty CSS method and/or there is a much easier, more commonly used way of doing this. Go ahead and link/post that instead, but i would prefer this way as it makes most sense to me.
谢谢
推荐答案
如果您不想指定90％的宽度，则可以使用无宽度居中的动态ul:
This allows a widthless centered dynamic ul if you don't want to specify 90% width:
<!doctype html>
<div class="navbar">
<div id="for-ie">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>
</div>
<style>
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0 auto;
padding: 0px;
border:1px solid red;
display:table;
overflow: hidden;
}
.navbar li{
float: left;
padding: 2px;
width: 150px;
margin-left: auto ;
margin-right: auto ;
}
</style>
<!--[if IE]>
<style>
#for-ie { text-align:center; }
#for-ie ul { display:inline-block; }
#for-ie ul { display:inline; }
</style>
<![endif]-->
在IE6，FX 3中进行了测试.
Tested in IE6, FX 3.
不带多余元素的替代样式:
<!doctype html>
<div class="navbar">
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
<li><a href="Contact">Contact Us</a></li>
<li><a href="About">About Us</a></li>
</ul>
</div>
<style>
.navbar {
width: 100%;
margin-left: auto ;
margin-right: auto ;
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
padding: 0px;
zoom:1;
border:1px solid red;
overflow: hidden;
}
.navbar li{
padding: 2px;
width: 150px;
display:inline-block;
}
</style>
<!--[if IE]>
<style>
.navbar li { display:inline; }
</style>
<![endif]-->
这篇关于水平居中/均匀分布.在< ul>内部在< div>内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
