在<div>内的<ul>内部水平居中/均匀分布<li>

Question

在<div>内的<ul>内部水平居中/均匀分布<li>

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

我看了谷歌和这个网站,我无法找到我正在寻找的确切内容.

我想是能够让我当前的风格(使用<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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

如果需要,我还可以包含我的.navbar a {}.我对CSS很新,所以变得简单,我也首先看到了SO和Google,并且找不到任何类似的东西(虽然可能因为我是新手,我也没有意识到它是一样的).

如果这是一个错误的CSS方法和/或有一个更容易,更常用的方法来做到这一点.请继续链接/发布,但我更喜欢这种方式,因为它对我来说最有意义.

谢谢

Answer 1

med*_*iev 22

ul如果您不想指定90%宽度,则允许无宽度居中动态:

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

太好了!但是`<li>`宽度是硬编码的. (6认同)
创建一个http://jsfiddle.net/DfPHw/,以防万一像我这样的人想要看到实际行动.谢谢@meder. (5认同)

Answer 2

Sam*_*ody 9

您可以使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 3

Ted*_*ker 6

目前，执行此操作的正确方法是仅使用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 */
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	15 年，6 月前
查看次数：	64407 次
最近记录：	9 年前