html - 您认为将菜单导航栏居中很容易吗？

Question

我正在尝试使用 HTML5 和 CSS3。无法让此菜单导航栏以我希望响应式网站为中心。

nav ul,
nav ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

#mainav,
#breadcrumb,
.sidebar nav {
  line-height: normal;
}

#mainav .drop::after,
#mainav li li .drop::after,
#breadcrumb li a::after,
.sidebar nav a::after {
  position: absolute;
  font-family: "FontAwesome";
  font-size: 15px;
  line-height: 15px;
}


/* Top Navigation */

#mainav {}

#mainav ul {}

#mainav ul ul {
  z-index: 9999;
  position: absolute;
  width: 160px;
  text-align: left;
}

#mainav ul ul ul {
  left: 160px;
  top: 0;
}

#mainav li {
  display: block;
  position: relative;
  float: left;
  margin: 0;
  padding: 10;
  text-transform: uppercase;
}

#mainav li:last-child {
  margin-right: 0;
}

#mainav li li {
  width: 100%;
  margin: 0;
  text-transform: none;
}

#mainav ul.clear {
  border: solid;
  border-width: 0 0 0 1px;
}

#mainav li a {
  display: block;
  padding: 20px;
  border: solid;
  border-width: 0 1px 1px 0;
  border-collapse: collapse;
}

#mainav li li a {
  border-width: 0 0 1px 0;
}

#mainav li li:first-child a,
#mainav li li:last-child a {
  border-width: 0 0 1px 0;
}

#mainav .drop {
  padding-left: 25px;
}

#mainav li li a,
#mainav li li .drop {
  display: block;
  margin: 0;
  padding: 10px 15px;
}

<div class="wrapper row2">
  <nav id="mainav" class="hoc clear">
    <ul class="clear">
      <li class="active"><a href="index.html">Home</a></li>
      <li><a class="drop" href="#">Search properties</a>
        <ul>
          <li><a href="search.html">Search properties</a></li>
          <li><a href="tips.html">Tips for parents</a></li>
        </ul>
        <li><a class="drop" href="#">Owners</a>
          <ul>
            <li><a href="register.html">Register & FAQ</a></li>
            <li><a href="login.html">Login</a></li>
          </ul>
        </li>

        <li><a href="blog.html">Blog</a></li>
        <li><a href="about.html">About us</a></li>

    </ul>
  </nav>
</div>

我添加了太多的代码，以至于这里的系统都在提示，所以我不得不编辑最后几行。

Answer 1

只需添加这个，它就会使 ul 居中在nav里面元素:

#mainav {
  text-align: center;
}

#mainav ul {
  display: inline-block;
}

另外我换了一个 </li>用</ul>子菜单末尾的标记 - 顺序错误。

nav ul,
nav ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

#mainav,
#breadcrumb,
.sidebar nav {
  line-height: normal;
}

#mainav .drop::after,
#mainav li li .drop::after,
#breadcrumb li a::after,
.sidebar nav a::after {
  position: absolute;
  font-family: "FontAwesome";
  font-size: 15px;
  line-height: 15px;
}


/* Top Navigation */

#mainav {
text-align: center;
}

#mainav ul {
display: inline-block;
}

#mainav ul ul {
  z-index: 9999;
  position: absolute;
  width: 160px;
  text-align: left;
}

#mainav ul ul ul {
  left: 160px;
  top: 0;
}

#mainav li {
  display: block;
  position: relative;
  float: left;
  margin: 0;
  padding: 10;
  text-transform: uppercase;
}

#mainav li:last-child {
  margin-right: 0;
}

#mainav li li {
  width: 100%;
  margin: 0;
  text-transform: none;
}

#mainav ul.clear {
  border: solid;
  border-width: 0 0 0 1px;
}

#mainav li a {
  display: block;
  padding: 20px;
  border: solid;
  border-width: 0 1px 1px 0;
  border-collapse: collapse;
}

#mainav li li a {
  border-width: 0 0 1px 0;
}

#mainav li li:first-child a,
#mainav li li:last-child a {
  border-width: 0 0 1px 0;
}

#mainav .drop {
  padding-left: 25px;
}

#mainav li li a,
#mainav li li .drop {
  display: block;
  margin: 0;
  padding: 10px 15px;
}

<div class="wrapper row2">
  <nav id="mainav" class="hoc clear">
    <ul class="clear">
      <li class="active"><a href="index.html">Home</a></li>
      <li><a class="drop" href="#">Search properties</a>
        <ul>
          <li><a href="search.html">Search properties</a></li>
          <li><a href="tips.html">Tips for parents</a></li>
        </ul>
      </li>
      <li><a class="drop" href="#">Owners</a>
        <ul>
          <li><a href="register.html">Register & FAQ</a></li>
          <li><a href="login.html">Login</a></li>
        </ul>
      </li>

      <li><a href="blog.html">Blog</a></li>
      <li><a href="about.html">About us</a></li>

    </ul>
  </nav>
</div>