30

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

我查看了谷歌和这个网站，但我找不到我要找的东西。

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

4

8 回答 8

23

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

在 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]-->
于 2010-07-15T20:21:46.213 回答
11

如今，正确的做法是使用 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 */
}
于 2016-05-11T15:00:57.220 回答
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>
于 2013-03-06T00:00:49.980 回答
2

基本上归结为添加text-align: center到 ul 和display: inline-blockli 的。

这似乎可以解决问题：

<!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>
于 2010-07-15T20:32:14.743 回答
0

你在寻找这样的东西：？

.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>
于 2010-07-15T20:25:32.243 回答
0

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

例如：

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

如果你想保持 .navbar 的背景颜色，坚持 100%，从 li 中删除左侧浮动并设置它的样式->

.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;
}
于 2010-07-15T20:28:39.140 回答
0

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

于 2015-11-26T23:12:12.860 回答
-2

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

于 2014-12-03T12:49:24.230 回答