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

前端之家收集整理的这篇文章主要介绍了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]-->
原文链接:https://www.f2er.com/css/220461.html

猜你在找的CSS相关文章