Question

我尝试在页面中心制作横向菜单但是＆div;对齐=中心＆＃39;工作不正常。

＆＃13;

.nav ul {
  display: block;
  list-style-type: none;
  margin: 0;
  position: absolute;
}
.nav li {
  display: inline-block;
  float: left;
}
.nav li a {
  display: block;
  min-width: 140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Helvetica
Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; } .nav li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } .nav div ul {display:block;} .nav li ul { display: none; } .nav
li ul li {
    display: block;
    float: none;
  }
  .nav li ul li a {
    width: auto;
    min-width: 100px;
    padding: 0 20px;
  }
  .nav ul > li:hover ul {
    display: block;
    visibility: visible;
  }
  .nav ul li:hover > ul {
    display: block;
  }

＆＃13;

<div class="nav">
  <ul>

    <li><a href="#">Home</a>
    </li>
    <li>
      <a href="#">About </a>
      <ul>
        <li><a href="#">A1</a>
        </li>
        <li><a href="#">A2</a>
        </li>
      </ul>
    </li>

  </ul>
</div>

＆＃13;

sample code 我试图在页面中心制作水平菜单，但是＆＃div; div align = center＆＃39;工作不正常。

Answer 1

从您的ul中删除position:absolute;并添加这些小修改

.nav{
    width: 100%;
}
.nav ul {   
    display:block;
    list-style-type:none;
    margin: 0px auto;
    width: 50%;
}

这是已解决的fiddle

Answer 2

删除position:absolute;。它不需要任何边距或填充值。

.nav ul {
list-style-type:none;
margin:0 auto;
display:table;
}

这里解决了小提琴link

Answer 3

请删除ul position: absolute;样式其他样式。这些是您需要做的其他更改。

.nav {
    display: -webkit-box;
}
.nav ul {
    margin: 0 auto;
}

Answer 4

使用如下：

.nav {
    margin:0 auto;
}

Answer 5

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #19c589;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">About</a>
    <div class="dropdown-content">
      <a href="#">A1</a>
      <a href="#">A2</a>
      <a href="#">A3</a>
    </div>
  </li>
  <li><a href="#news">New</a></li>
</ul>

Css div中心对齐不起作用

5 个答案: