Question

我的标题左侧有多余的空间。

使用<nav>和<ul>的页脚也遇到了相同的问题，但是将其编辑为仅使用<a>元素，这似乎可以解决问题。不过，我想将<nav>保留在标题中，最好不使用负数 margin-left。

<header>
 <nav>
  <ul class="mainnav">
   <li><a href="#">Home</a></li>
   <li><a href="#">Menu</a></li>
   <li><a href="#">Logo</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">Location</a></li>
  </ul>
 </nav>
</header>

Answer 1

由于ul

，您的标题左侧面临多余的空间

浏览器的许多元素都有默认的CSS值，ul是其中之一。

从当前代码中删除填充

示例：

.mainnav {
  /* add this to override default padding left of ul*/
  padding-left: 0;
}

此处是浏览器使用的默认CSS值的参考：w3schools link

Answer 2

尝试使用此代码。 HTML代码：

<header>
  <nav>
    <ul class="mainnav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Menu</a></li>
      <li><a href="#">Logo</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Location</a></li>
    </ul>
  </nav>
</header>
<div class="main-body">

</div>

<footer >
  <section class="footnav">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Order</a>
    <a href="#">Jobs</a>
    <a href="#">Contact</a>
  </section>
</footer>

CSS代码：

.main-body{
  min-height:500px;
}
.mainnav {
    max-width: 800px;
    margin-left: 0;
    margin-bottom: 5px;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
  padding-left:0px;
}

.mainnav li {
    display: inline-block;
}

.footnav {
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: space-evenly;
}
footer{
  position: fixed;
  left:0;
  right:0;
  bottom:0;

}
.footnav a {
    display: inline-block;
    padding: 10px;
}

希望它能正常工作。

标头旁多余的空间

2 个答案: