Question

我有多个<ul>，我想将它们对齐<nav>的中心，为此我尝试以下代码：

#navigation{
  width:100%;  height:200px; color:black; background:blue;  text-align:center;
    margin:0 auto;
}
ul{
margin: 0 auto;
float:left;
}

您可以在jsfiddle中看到测试，如何将<ul>与<nav>的中心对齐？

Answer 1

方法1

删除花车，使用display:inline-block

#navigation {
  width: 100%;
  height: 200px;
  color: black;
  text-align: center;
  margin: 0 auto;
}
ul {
  display: inline-block;
  vertical-align: top;
}
li {
  list-style: none;
  font-size: 16px;
  font-family: My Custom Font2;
  margin: 5px;
  font-weight: 600;
  margin-right: .8em;
  padding: 0;
}

<nav id="navigation">
  <ul>
    <li class="titleLi">About Us</li>
    <li><a href="" target="">Team</a>
    </li>
    <li><a href="" target="">Blog</a>
    </li>
    <li><a href="" target="">Contact</a>
    </li>
    <li><a href="" target="">Support</a>
    </li>
  </ul>

  <ul>
    <li class="titleLi">Download</li>
    <li><a href="" target="">for iOS</a>
    </li>
    <li><a href="" target="">for Android</a>
    </li>
  </ul>

  <ul>
    <li class="titleLi">Legal</li>
    <li><a href="" target="">Terms and conditions</a>
    </li>
    <li><a href="" target="">Privacy police</a>
    </li>
  </ul>

</nav>

方法2

Flexbox的

#navigation {
  width: 100%;
  height: 200px;
  color: black;
  text-align: center;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
ul {} li {
  list-style: none;
  font-size: 16px;
  font-family: My Custom Font2;
  margin: 5px;
  font-weight: 600;
  margin-right: .8em;
  padding: 0;
}

<nav id="navigation">
  <ul>
    <li class="titleLi">About Us</li>
    <li><a href="" target="">Team</a>
    </li>
    <li><a href="" target="">Blog</a>
    </li>
    <li><a href="" target="">Contact</a>
    </li>
    <li><a href="" target="">Support</a>
    </li>
  </ul>

  <ul>
    <li class="titleLi">Download</li>
    <li><a href="" target="">for iOS</a>
    </li>
    <li><a href="" target="">for Android</a>
    </li>
  </ul>

  <ul>
    <li class="titleLi">Legal</li>
    <li><a href="" target="">Terms and conditions</a>
    </li>
    <li><a href="" target="">Privacy police</a>
    </li>
  </ul>

</nav>

方法3

CSS表

#navigation {
  width: 100%;
  height: 200px;
  color: black;
  text-align: center;
  margin: 0 auto;
  display: table;
}
ul {
  display: table-cell;
}
li {
  list-style: none;
  font-size: 16px;
  font-family: My Custom Font2;
  margin: 5px;
  font-weight: 600;
  margin-right: .8em;
  padding: 0;
}

<nav id="navigation">
  <ul>
    <li class="titleLi">About Us</li>
    <li><a href="" target="">Team</a>
    </li>
    <li><a href="" target="">Blog</a>
    </li>
    <li><a href="" target="">Contact</a>
    </li>
    <li><a href="" target="">Support</a>
    </li>
  </ul>

  <ul>
    <li class="titleLi">Download</li>
    <li><a href="" target="">for iOS</a>
    </li>
    <li><a href="" target="">for Android</a>
    </li>
  </ul>

  <ul>
    <li class="titleLi">Legal</li>
    <li><a href="" target="">Terms and conditions</a>
    </li>
    <li><a href="" target="">Privacy police</a>
    </li>
  </ul>

</nav>

Answer 2

如果你漂浮你使用你的法术到半容器流，所以你失去了与父母的继承，所以自动边距不会检测其父级的宽度

示例模板到中心ul：

<!DOCTYPE html>
<html>
<head>
    <title>test ul center</title>
    <style type="text/css">
    #wrapper{
        margin: 0 auto;
        max-width: 1200px;
    }
    #navigation{
        margin: 0 auto;
        width: 40%;

    }
    #navigation ul{


        vertical-align: top;
        display: inline-block;
    }

    </style>
</head>

<body>
<div id ="wrapper">
    <nav id="navigation">
      <ul>
        <li class="titleLi">About Us</li>
        <li><a href="" target="">Team</a>
        </li>
        <li><a href="" target="">Blog</a>
        </li>
        <li><a href="" target="">Contact</a>
        </li>
        <li><a href="" target="">Support</a>
        </li>
      </ul>

      <ul>
        <li class="titleLi">Download</li>
        <li><a href="" target="">for iOS</a>
        </li>
        <li><a href="" target="">for Android</a>
        </li>
      </ul>

      <ul>
        <li class="titleLi">Legal</li>
        <li><a href="" target="">Terms and conditions</a>
        </li>
        <li><a href="" target="">Privacy police</a>
        </li>
      </ul>

    </nav>
</div>
</body>
</html>

将<ul>中心与其他人对齐

2 个答案: