Question

我正在尝试将导航链接集中在div内，但无论我尝试过什么都行不通。我已经尝试了margin-left:auto，margin-right:auto，但没有尝试......

以下是CSS代码的部分：

#nav {
    display:block;
    background-color:#505050;
    height:17.5px;
    box-shadow: 0px 0px 15px 5px #CCCCCC inset;
    border:1px solid #EEEEEE;
    border-radius:20px;
    padding:1.5%;
}
#nav li {
    padding:0px 20px 0px 20px;
    display:inline;
    /*float:left;*/
    list-style:none;
    position:relative;
}
#nav li a {
    padding:0px 0px 20px 0px;
    color:#FFFFFF;
    text-decoration:none;
}

这是我的ul代码：

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Current Litters</a></li>
    <li><a href="#">Gallery</a>
        <ul>
            <li><a href="./bandi.html">Bandi</a></li>
            <li><a href="./studs.html">Studs Used</a></li>
            <li>Test Dog2</li>
            <li>Test Dog3</li>
        </ul>
    </li>
    <li><a href="#form">Contact Us</a></li>
 </ul>

这是我的其余代码实际上没有它我注意到我的下拉菜单（图库）下没有正确显示，...这是其余的css文件...显示下拉菜单会发生什么...也许你可以告诉我为什么浮子把它拧起来......

...文本对齐确实很棒....但只有在移除浮动后...

#nav li a:hover {
    text-decoration:underline;
}
#nav li ul{
    padding:10px;
    font-size:medium;
    display:none;
    position:absolute;
    left:0px;
    top:30px;
    background-color:rgba(50,50,50,0.8);
}
#nav li:hover ul {
    display:block;
    border-radius:20px;
    border:1px solid;
    width:150px;
}

Answer 1

这实际上非常简单，因为您的列表项是display:inline。添加此样式：

#nav {
    text-align:center;
}

演示：http://jsfiddle.net/fH6f5/

还有很多其他方法可以做到这一点，但这似乎就是你所需要的。请确保不要float <li>（我看到你注释掉了）。

Answer 2

将text-align: center添加到导航无序列表似乎对我来说适用于chrome

#nav {
  text-align: center;
}

Answer 3

要使块元素居中，还需要将宽度显式设置为某个值，如下所示：

#nav {
    width: 50%;
    margin: 0 auto;
}

Answer 4

您需要对代码进行相当多的更改才能正常显示。您的列表元素目前是inline个元素。 inline元素有很多限制，包括无法明确设置其宽度，高度以及它们的上下边距。请注意，根据W3 spec：

通常，内联元素可能只包含数据和其他内联元素。

话虽如此，您可以使用display: inline-block对当前代码没有任何问题。关于使用inline-block元素，请注意一个非常重要的事项：空白。代码中inline-block元素之间的任何空格都将在浏览器中显示为空格。因此，如果您想要触摸元素，他们的标签也必须触摸：

<!-- Version A: This will produce a gap between the two elements -->
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>

<!-- Version B: This will not produce a gap between the two elements -->
<li>
    <a href="#">Home</a>
</li><li>
    <a href="#">About Us</a>
</li>

如果您从上面的代码中选择版本A，我建议您使用float元素，而不是依靠inline-block进行定位。将浮动列表居中比使inline列表居中更困难。这是我喜欢将浮动元素集中在一起的方式：

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
    </ul>
</nav>

CSS：

nav { overflow: hidden; }
nav ul {
    position: relative;
    float: left;
    left: 50%;
    list-style: none;
    padding: 0; }
nav ul li {
    position: relative;
    float: left;
    right: 50%;
    margin: 0 5px; }
nav ul li a { display: block; }

预览：http://jsfiddle.net/Wexcode/rsDbY/

你应该在你的下拉菜单中发布你想要的设计，我真的不知道你想要的最终结果是什么，所以我无法真正帮助你。

Answer 5

您需要在margin-right:auto和margin-left:auto

的ul上设置固定宽度

Answer 6

您是否尝试将margin: 0 auto;添加到#nav样式？您还必须设置ul宽度才能使其正常工作。

无法将div放在div中

6 个答案: