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

Posted 2023-03-05

技术标签:

【中文标题】<div> 内 <ul> 内水平居中/均匀分布 <li>【英文标题】：Horizontally centering/evenly distributed <li> inside of <ul> inside a <div> 【发布时间】：2011-03-16 15:13:49 【问题描述】：

有一个导航栏<div>，里面是一个<ul>，每个<li> 都包含一个带有链接的<a>（这是一个导航栏）

我在 Google 和这个网站上查找过，但找不到我要找的确切内容。

我想要的是能够保持我当前的风格（使用<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 方法和/或有更简单、更常用的方法来执行此操作，请继续链接/发布它，但我更喜欢这种方式，因为它对我来说最有意义。

【问题讨论】：

【参考方案1】：

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

【讨论】：

为此创建了一个jsfiddle.net/DfPHw，以防像我这样的人希望看到实际情况。谢谢@meder。【参考方案2】：

如今，正确的做法是使用 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】：

您可以使用 text-align:fixed 来做到这一点，只需几行 CSS，无需额外的标记。

在这里查看我的答案：https://***.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】：

基本上归结为将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>

【讨论】：

看起来我需要内联块显示 li 和 text-align: center 为我的 ul！这在 Ie 中并没有解决这在 IE6 和可能的其他 IE 中不起作用，因为 li 本身是阻塞的，您需要像我的回答（对于 IE）一样的冗余规则。这在 IE8 中运行良好，IE6 确实支持 inline-block。有趣的是人们如何批评然后基本上复制你的答案并最终获得荣誉......【参考方案5】：

您是否正在寻找这样的东西：？

.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】：

你可以使用 "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;

http://jsfiddle.net/dchwv6qn/1/

【讨论】：

【参考方案7】：

你需要为你的容器定义一个固定的宽度。

例如：

.navbar 
width: 1000px; /* */
margin: 0 auto;
background-color: #ABCDEF;

如果你想保持 .navbar 的 bg 颜色，坚持 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;

【讨论】：

【参考方案8】：

我尝试了每件事，但没有任何效果，所以如果你有同样的问题，那么我建议你使用表格和 td 来对齐它们，仍然可以正常工作。

【讨论】：

以上是关于<div> 内 <ul> 内水平居中/均匀分布 <li>的主要内容，如果未能解决你的问题，请参考以下文章