HTML：保证金汽车不是导航栏中工作

问题描述：

<nav class="nav-container"> 
    <span class="nav-item">ABOUT ME</span> 
    <span class="nav-item">CONTACT ME</span> 
    <span class="nav-item">PORTFOLIO</span> 
</nav>

和

.nav-item { 
    display:inline; 
    color:white; 
    padding:30px 10px; 
    font-style:bold; 
    font-family:sans-serif; 
    font-size:20px; 
    width:1000px; 
    margin:0 auto; 
}

我想我在页面中间为中心的导航栏，以margin:auto，但由于某种原因，它不起作用。当我设置display:block时，它可以工作，但不会显示在一行中。有人能告诉我这是为什么吗？谢谢你...

我不知道你的实际代码，但在这里，你错过了'' – RyanS

答

内联元素的行为就像文本一样，所以你需要把对齐放在父对象上。

在你的CSS，去掉margin:0 auto;，并添加text-align: center;上.nav-container：

.nav-item{ 
    display:inline; 
    color:white; 
    padding:30px 10px; 
    font-style:bold; 
    font-family:sans-serif; 
    font-size:20px; 
    width:1000px; 
} 

.nav-container { 
    text-align: center; 
}

http://jsfiddle.net/5v7Lppkf/

答

对于内联元素这样的，使用的text-align：父元素中心，所以添加到您的css：

.nav-container { text-align:center }

答

只需将以下规则添加到您的CSS：

.nav-container { text-align: center; }

这应该是所有的魔法。

HTML：保证金汽车不是导航栏中工作

相关推荐