css – 水平居中/均匀分布>内部a

有一个Navbar< div>，里面是一个< ul>和每个< li>包含< a>带有链接(这是一个导航栏)

我看了谷歌和这个网站，我couldnt找到我正在寻找什么。

我想要的是能够保持我当前的风格(使用< li>与< a>的内部)，我想要< li>以均匀分布和居中(如果它们均匀分布则该部分是自然的…)在< ul> (位于navbar< 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和谷歌第一，couldnt找到任何东西很像这样(虽然也许，因为我是新的，我不认识它的一样)。

如果这是一个错误的CSS方法和/或有一个更容易，更常用的方法这样做。继续和链接/ post，而不是，但我更喜欢这种方式，因为它是最有意义的我。

谢谢

解决方法

如果不想指定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]-->

css – 水平居中/均匀分布>内部a

解决方法

猜你在找的CSS相关文章