Question

我无法弄清楚如何将导航和页脚放在同一条线上。我已经尝试更改列表边距，但这不起作用。我找不到下面的代码我做错了什么：

ul {
  margin: auto;
  padding-top: 0;
  text-align: center;
}
li {
  display: inline-block;
  list-style-type: none;
}

<nav>
  <ul>
    <li><a href=''>Home</a>
    </li>
    <li><a href=''>About</a>
    </li>
    <li><a href=''>Contact</a>
    </li>
    <li><a href=''>Citations</a>
    </li>
  </ul>
</nav>

<footer style="color: white">
  <pre> 2016-2017 &copy; by Owner</pre>
</footer>

有什么建议吗？

Answer 1

将导航放在页脚内...

<footer>
  <nav>
    <ul>
      <li><pre> 2016-2017 &copy; by Owner</pre></li>
      <li><a href=''>Home</a>
      </li>
      <li><a href=''>About</a>
      </li>
      <li><a href=''>Contact</a>
      </li>
      <li><a href=''>Citations</a>
      </li>
    </ul>
  </nav>
</footer>

Answer 2

这将允许 nav 和页脚元素在同一行上呈现。

nav,
footer {
  display: inline-block;
}

如果您希望它们也在浏览器窗口或区域中居中，则可以在它们周围添加包装元素并将 text-align：center; 应用于该包装元素。

为了将它们分开，你应该相应地改变左/右边距。

如何内嵌段落和导航

2 个答案: