如何在网页的页脚中包含版权信息？

Question

版权信息作为下一个菜单项出现，但我希望它作为居中文本出现在页脚内的下一行，所以请告诉我如何实现这一点。请帮忙。提前致谢。

/* ----- FOOTER ----- */




.footer-nav{  
  display: flex; 
  flex-direction: row;
  justify-content: space-between;
  list-style: none;
  text-align: center;
  text-transform: uppercase;
  background-color: #333;
  padding: 50px;
  font-size: 80%;
  }



.footer-nav li{
   
    flex-grow: 100%;
}

<div class="wrapper">

<ul class="footer-nav">
        <li><a href="#">About Us</a></li>
              <li><a href="#">blah</a></li>
              <li><a  href="#"blah</a></li>  
              <li><a href="#">blah</a></li>

            <p class = "copyright">aaa</p>

    </ul>





</div>

Answer 1

从 ulr 标签中取出背景颜色并将其添加到 .wrapper

同时从您的 ul 列表中删除 p 标记并将其放置在列表之外但在包装器内

对你的 p 标签应用 text-align:center

从您的页脚中删除 padding-top 和 padding-bottom 以获得良好的拟合效果

下面的片段

/* ----- FOOTER ----- */


p{
text-align:center;
}

.footer-nav{  
  display: flex; 
  flex-direction: row;
  justify-content: space-between;
  list-style: none;
  text-align: center;
  text-transform: uppercase;
  padding: 50px;
  padding-top:0;
  padding-bottom:0;
  font-size: 80%;
  }



.footer-nav li{
   
    flex-grow: 100%;
}
.wrapper{
  background-color: #333;
  }

<div class="wrapper">

<ul class="footer-nav">
        <li><a href="#">About Us</a></li>
              <li><a href="#">blah</a></li>
              <li><a  href="#"blah</a></li>  
              <li><a href="#">blah</a></li>

    </ul>
                <p class = "copyright">aaa</p>





</div>

Answer 2

我，你应该尝试使用footer 元素并将<ul> 放在内部，将<p> 放在<ul> 外部，并使用一个特殊的类来使文本居中。

CSS：

.footer-nav{  
  display: flex; 
  flex-direction: row;
  justify-content: space-between;
  list-style: none;
  text-align: center;
  text-transform: uppercase;
  padding: 50px;
  font-size: 80%;
  }

  footer{
     background-color: #333;
  }

.copyright{
  text-align: center;
  color: white;
}

.footer-nav li{
    flex-grow: 100%;
}

和 HTML：

<div class="wrapper">
<footer>
  <ul class="footer-nav">
        <li><a href="#">About Us</a></li>
              <li><a href="#">blah</a></li>
              <li><a  href="#"</a>blah</li>  
              <li><a href="#">blah</a></li>
    </ul>
     <p class="copyright">aaa</p>
</footer>
</div>

https://jsfiddle.net/nesquimo/u1pq6xvq/

Answer 3

有很多方法可以做到。如果您想要列表中的版权，则需要将其包装在 li 中，因为只有 li 可以是 ul 的子代。然后给li一个width: 100%或flex-basis: 100%并将父级设置为flex-wrap: wrap

.footer-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
  text-align: center;
  text-transform: uppercase;
  background-color: #333;
  padding: 50px 50px 25px;
  font-size: 80%;
}

.footer-nav li {
  flex-grow: 100%;
}
.copyright {
  flex-basis: 100%;
  margin-top: 25px;
}

<div class="wrapper">

  <ul class="footer-nav">
    <li><a href="#">About Us</a></li>
    <li><a href="#">blah</a></li>
    <li><a href="#">blah</a></li>
    <li><a href="#">blah</a></li>
    <li class="copyright"><p>aaa</p></li>
  </ul>
  
</div>