Css 水平居中/均匀分布<；李>；内部<；ul>；内部a<；部门>；_Css_Centering

Css 水平居中/均匀分布<；李>；内部<；ul>；内部a<；部门>；

css

Css 水平居中/均匀分布<；李>；内部<；ul>；内部a<；部门>；,css,centering,Css,Centering,有一个导航栏，里面是一个导航栏，每个导航栏包含一个带有链接的导航栏（用于导航栏）我在谷歌和这个网站上搜索，却找不到我想要的东西我想要的是能够保持我当前的风格（使用和的内部），并且我想要在内部（在导航栏内部）均匀分布和居中（如果它们均匀分布，这部分自然会出现…）不管怎么说，如果这不合理，请告诉我，目前它们只是左对齐的……以下是我得到的： HTML: 如果有必要，我还可以包含我的.navbar{}。我对CSS非常陌生，所以说得容易些，而且我确实先浏览了so和Google，找不到任何类似的东西

有一个导航栏，里面是一个导航栏，每个导航栏包含一个带有链接的导航栏（用于导航栏）

我在谷歌和这个网站上搜索，却找不到我想要的东西

我想要的是能够保持我当前的风格（使用

和的内部），并且我想要在内部（在导航栏内部）均匀分布和居中（如果它们均匀分布，这部分自然会出现…）
不管怎么说，如果这不合理，请告诉我，目前它们只是左对齐的……以下是我得到的：
HTML:
如果有必要，我还可以包含我的.navbar{}。
我对CSS非常陌生，所以说得容易些，而且我确实先浏览了so和Google，找不到任何类似的东西（尽管可能因为我是新手，我不知道它是一样的）
如果这是一种错误的CSS方法和/或有一种更简单、更常用的方法，请继续链接/发布，但我更喜欢这种方式，因为它对我来说最有意义。
如果不想指定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]-->








navbar先生{
宽度：100%；
左边距：自动；
右边距：自动；
背景色：#ABCDEF；
}
纳瓦尔先生{
列表样式类型：无；/*删除项目符号*/
文本对齐：居中；
保证金：0自动；
填充：0px；
边框：1px纯红；
显示：表格；
溢出：隐藏；
}
李国宝先生{
浮动：左；
填充：2px；
宽度：150px；
左边距：自动；
右边距：自动；
}

在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]-->








navbar先生{
宽度：100%；
左边距：自动；
右边距：自动；
背景色：#ABCDEF；
}
纳瓦尔先生{
列表样式类型：无；/*删除项目符号*/
文本对齐：居中；
填充：0px；
缩放：1；
边框：1px纯红；
溢出：隐藏；
}
李国宝先生{
填充：2px；
宽度：150px；
显示：内联块；
}
你在找这样的东西吗：
.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>

.navbar{
宽度：100%；
左边距：自动；
右边距：自动；
背景色：#ABCDEF；
}
纳瓦尔先生{
列表样式类型：无；/*删除项目符号*/
文本对齐：居中；
边际：0px；
填充：0px；
溢出：隐藏；
}
李国宝先生{
显示：内联；
线高：30px；
}
.navbar li a{padding:.4em 5em；}






您需要为容器定义固定宽度
例如：
.navbar {
width: 1000px; /* */
margin: 0 auto;
background-color: #ABCDEF; }

如果你想保持你的背景颜色为.navbar，坚持使用100%，去掉li中的float left，并按如下方式设置->
.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;
}

基本上是将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>


navbar先生{
背景色：#ABCDEF；
}
纳瓦尔先生{
列表样式类型：无；
边际：0px；
填充：0px；
文本对齐：居中；
}
李国宝先生{
显示：内联块；
填充：2px；
宽度：150px；
}






您可以使用文本对齐：只需几行CSS即可完成此操作，无需额外标记
请看我的回答：




.navbar>ul{text align:justify；}
.navbar>ul>li{display:inline block}
.navbar>ul:after{content:''；显示：内联块；宽度：100%；高度：0}
好吧，我已经尝试了每一件事，但没有任何效果，因此如果您有相同的问题，那么我建议您使用表格和td来对齐它们，仍然可以正常工作。您可以使用“显示：表格”和“显示：表格单元格”
代码更清晰，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;
}








navbar先生{
背景色：#ABCDEF；
}
纳瓦尔先生{
列表样式类型：无；
填充：0px；
显示：表格；
表布局：固定；
宽度：100%；
}
李国宝先生{
填充：2px；
显示：表格单元格；
宽度：50px；/*只是为了让浏览器知道所有单元格都是相等的*/
文本对齐：居中；
边框：1px实心#FF0000；
}

现在正确的方法是使用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 */
}

看起来我需要我的内联块显示li和文本对齐：我的ul的中心！这在Ie中无法修复，但在IE6和其他Ie中可能无法修复，因为li是本机块，您需要一个冗余规则，如我的答案中所示（对于Ie）。这在IE8中效果非常好，IE6确实支持内联块。有趣的是，人们可以批评你，然后基本上复制你的答案，最后也得到了信任……为防止像我这样的人希望看到事情发生而创造了一个新的平台。谢谢@meder。你能再解释一下吗？很有魅力。请注意浏览器的兼容性。
<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>

<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;
}

.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 */
}