水平居中/均匀分布<li>代替<ul>里面一个<div>
[英]Horizontally centering/evenly distributed <li> inside of <ul> inside a <div>
问题描述
有一个 Navbar <div> ，里面是一个<ul>并且每个<li>包含一个带有链接的<a> （这是一个导航栏）
我在谷歌和这个网站上查看，我找不到我想要的东西。
我想要的是能够保持我当前的风格（使用<li>和<a>的内部），并且我希望<li>均匀分布并居中（如果它们均匀分布，这部分很自然。 ..) 在<ul> （在导航栏<div> ）。
无论如何，如果这没有意义，请告诉我，目前它们只是左对齐……这就是我所拥有的：
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，但找不到任何类似的东西（虽然也许因为我是新手，我没有意识到它是一样的）。
如果这是一个错误的 CSS 方法和/或有更简单、更常用的方法来执行此操作，请继续链接/发布该方法，但我更喜欢这种方式，因为它对我来说最有意义。
8 个解决方案
解决方案1
23 已采纳 2010-07-15 20:21:46
如果您不想指定 90% 的宽度，这允许无宽度居中的动态ul ：
<!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 中测试。
编辑：没有无关元素的替代风格：
<!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]-->
解决方案2
11 2016-05-11 15:00:57
现在正确的做法是使用 Flexbox：
.navbar ul {
list-style-type: none;
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: nowrap; /* assumes you only want one row */
}
解决方案3
9 2013-03-06 00:00:49
您可以使用 text-align:fixed 来完成此操作，只需几行 CSS，无需额外标记。
在此处查看我的答案： https : //stackoverflow.com/a/15232761/87520
<ul>
<li><a href="Home">Home</a></li>
<li><a href="Discounts">Discounts</a></li>
</ul>
<style>
.navbar > ul {text-align:justify;}
.navbar > ul > li {display:inline-block}
.navbar > ul:after { content:' '; display:inline-block; width: 100%; height: 0 }
</style>
解决方案4
2 2010-07-15 20:32:14
基本上归结为将text-align: center添加到 ul 并将display: inline-block到 li。
这似乎可以解决问题：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.navbar {
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none;
margin: 0px;
padding: 0px;
text-align: center;
}
.navbar li{
display: inline-block;
padding: 2px;
width: 150px;
}
</style>
</head>
<body>
<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>
</body>
</html>
解决方案5
0 2010-07-15 20:25:32
你在寻找这样的东西：？
.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;
overflow: hidden;
}
.navbar li{
display:inline;
line-height:30px;
}
.navbar li a { padding:.4em 5em;}
<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>
解决方案6
0 2010-07-15 20:28:39
你需要为你的容器定义一个固定的宽度。
例如：
.navbar {
width: 1000px; /* */
margin: 0 auto;
background-color: #ABCDEF; }
如果你想保持 .navbar 的 bg 颜色，坚持 100%，从 li 中移除浮动左侧并像这样设置样式 ->
.navbar ul {
list-style-type: none; /*to remove bullets*/
text-align: center;
margin: 0 auto;
padding: 0px;
width: 800px;
overflow: hidden;
}
.navbar li{
display: inline-block;
padding: 2px;
width: 150px;
marign: 0 auto;
}
解决方案7
0 2015-11-26 23:12:12
您可以使用“display: table”和“display: table-cell”，代码更清晰，li 宽度不是硬编码的：
<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>
.navbar {
background-color: #ABCDEF;
}
.navbar ul {
list-style-type: none;
padding: 0px;
display: table;
table-layout: fixed;
width: 100%;
}
.navbar li{
padding: 2px;
display:table-cell;
width: 50px; /* just for the browser to get idea that all cells are equal */
text-align: center;
border: 1px solid #FF0000;
}
解决方案8
-2 2014-12-03 12:49:24
好吧，我尝试了所有事情，没有任何效果，所以如果您遇到同样的问题，那么我建议您使用表格和 td 来对齐它们，但仍然可以正常工作。
居中浮动列表项<li>在 div 或它们的内部<ul></ul></li>
[英]Centering floating list items <li> inside a div or their <ul>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.