HTML＆CSS中心导航条

我有问题，在我的小测试网站上，我不能导航栏居中。 我想要上的所有按钮居中，导航栏从网站的右侧移动到左侧。我有没有固定宽度并且不想拥有一个。解决方案应该也可以与智能手机和平板电脑一起使用，只需提一下：我并不在意IE支持。我已经通过网络搜索了一下，但没有得到我尝试过的工作。HTML＆CSS中心导航条

这里是我已经有了代码：

 <header class="navigation"> 
     <nav> 
      <ul> 
       <li><a class="active" href="#home">Home</a></li> 
       <li><a href="#download">Download</a></li> 
       <li><a href="#contact">Contact</a></li> 
       <!-- Maybe the navigation bar gets more buttons in the future. --> 
      </ul> 
     </nav> 

     <h1>Test Test Test</h1> 
    </header>

这里是CSS代码：

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    border-radius: 5px; 
    background-color: #333333; 
} 

li { float: left; } 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 16px; 
    text-decoration: none; 
    border-bottom: none; 
} 

    li a:hover { background-color: #111111 }

我使用HTML5与CSS3。

编辑：这似乎是我不够清楚的按钮。按钮不应该与导航栏本身一样大。所有的按钮都应该位于导航栏中央，所以中间有按钮，左侧和右侧只有黑色的导航栏没有按钮，如果剩下足够的空间的话。

来源

2016-08-20 ShadowDragon

使用Flexbox的会做正是...

加入flex-flow: row wrap;将使菜单上的小屏幕包裹如果导航大于视域大。

您将需要在所有浏览器上运行这些样式的前缀。

.navigation nav { 
 
    display: flex; 
 
    justify-content: center; 
 
    
 
    background-color: #333333; 
 
} 
 
ul { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border-radius: 5px; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
    border-bottom: none; 
 
} 
 
li a:hover { 
 
    background-color: #111111 
 
}

<header class="navigation"> 
 
    <nav> 
 
    <ul> 
 
     <li><a class="active" href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#download">Download</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
     <!-- Maybe the navigation bar gets more buttons in the future. --> 
 
    </ul> 
 
    </nav> 
 

 
    <h1>Test Test Test</h1> 
 
</header>

来源

2016-08-20 22:32:36 Aaron

确定，谢谢。这似乎是我用按钮不够清楚。按钮不应该与导航栏本身一样大。所有的按钮都应该位于导航栏中央，所以中间有按钮，左侧和右侧只有黑色的导航栏没有按钮，如果剩下足够的空间的话。 – ShadowDragon

@ShadowDragon啊，我明白了，我已经为你更新了我的答案。 – Aaron

@ShadowDragon我也分离了需要前缀的样式，您可以使用在线自动前缀为您生成这些样式。 – Aaron

的simpliest解决方案，我认为将是，如果将只分100％通过菜单li项目数量，所以在这种情况下，我们有3个li元素，因此宽度的约33％：

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border-radius: 5px; 
 
    background-color: #333333; 
 
} 
 
li { 
 
    float: left; 
 
    width: 33%; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
    border-bottom: none; 
 
} 
 
li a:hover { background-color: #111111 }

<html> 
 
<head> 
 
</head> 
 
<body> 
 
     <header class="navigation">  
 
     <nav> 
 
      <ul> 
 
       <li><a class="active" href="#home">Home</a></li> 
 
       <li><a href="#download">Download</a></li> 
 
       <li><a href="#contact">Contact</a></li> 
 
       <!-- Maybe the navigation bar gets more buttons in the future. --> 
 
      </ul> 
 
     </nav> 
 

 
     <h1>Test Test Test</h1> 
 
     </header> 
 
</body> 
 
</html>

来源

2016-08-20 22:37:54 turkus

所以lution只是两行的CSS： 1. UL {文本对齐：中心;} 2.李{显示：内联块;} 这是所有:)

<html> 
 
<head> 
 
\t <style> 
 
\t \t ul { 
 
\t \t  list-style-type: none; 
 
\t \t  margin: 0; 
 
\t \t  padding: 0; 
 
\t \t  overflow: hidden; 
 
\t \t  border-radius: 5px; 
 
\t \t  background-color: #333333; 
 
\t \t  text-align: center; 
 
\t \t } 
 

 
\t \t li { display: inline-block; } 
 

 
\t \t li a { 
 
\t \t  display: block; 
 
\t \t  color: white; 
 
\t \t  text-align: center; 
 
\t \t  padding: 16px; 
 
\t \t  text-decoration: none; 
 
\t \t  border-bottom: none; 
 
\t \t } 
 

 
\t \t  li a:hover { background-color: #111111 } 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <header class="navigation"> 
 
     <nav> 
 
      <ul> 
 
       <li><a class="active" href="#home">Home</a></li> 
 
       <li><a href="#download">Download</a></li> 
 
       <li><a href="#contact">Contact</a></li> 
 
       <!-- Maybe the navigation bar gets more buttons in the future. --> 
 
      </ul> 
 
     </nav> 
 

 
     <h1>Test Test Test</h1> 
 
    </header> 
 
</body> 
 
</html>

来源

2016-08-21 00:03:20 besartm

HTML＆CSS中心导航条

回答

相关问题