Question

我无法集中导航栏。

这是我正在使用的示例导航栏

<style>
/* Begin Navigation Bar Styling */
#nav {
  width: 100%;
  float: left;
  margin: 0 0 3em 0;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  border-bottom: 1px solid #ccc; 
  border-top: 1px solid #ccc; }
#nav li {
  float: left; }
#nav li a {
  display: block;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  color: #069;
  border-right: 1px solid #ccc; }
#nav li a:hover {
  color: #c00;
  background-color: #fff; }
/* End navigation bar styling. */
</style>

但是如图所示，导航栏不居中。

我尝试过使用自动边距，但它不起作用。我该如何解决这个问题？

Answer 1

将text-align:center;添加到#nav

删除float:left;并将display: inline-block;添加到#nav li

更改为：

#nav {
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;
    text-align:center;
    background-color: #f2f2f2;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
}
#nav li {
    display: inline-block;
}

<强> JSFiddle Demo

Answer 2

display: inline-block;

这应该使导航栏居中

Answer 3

尝试这个新的css：

   #nav {
      margin: 0 0 3em 0;
      padding: 0;
      list-style: none;
      background-color: #f2f2f2;
      border-bottom: 1px solid #ccc; 
      position: relative;
      border-top: 1px solid #ccc; }
   #nav li {
      display: inline-block;}
   #wrap {
      width: 750px;
      margin: 0 auto;
      background-color: #fff; 
      text-align: center;
      width:100%;}

如何使水平导航栏居中

3 个答案: