CSS在页脚中证明内容问题

Posted 2023-03-21

【中文标题】CSS在页脚中证明内容问题

【英文标题】：css justify content issue in footer

【发布时间】：2020-05-31 06:03:39

【问题描述】：

我有一个页脚并希望我的列表项与我的h3 对齐。有什么办法吗？

现在 company 和 social 和 other 比其余的要多一点。我已经放了justify-content: center，但似乎标题的中心与我的列表项不同。希望有人可以帮助我。

footer 
  width: 100%;
  /*breite: 100%*/
  padding: 0;
  margin: 0;
  background-color: #5490dd;
  /*Hintergrundfarbe*/


.footer-items 
  width: 80%;
  margin: auto;
  display: flex;
  /*bringt alle Teile in eine Linie*/


.footer-column 
  z-index: 2;
  width: 33.33%;
  /*drittelt den Platz im footer*/
  text-align: center;


.footer-column ul 
  list-style: none;
  /*entfernt Anstriche*/


.footer-column ul li 
  margin: 0;
  padding-top: 5px;


.footer-column ul li a 
  text-decoration: none;
  /*entfernt das die Links unterstrichen sind*/
  color: rgb(230, 230, 230);
  list-style: none;

<footer>

  <div class="footer-items">

    <div class="footer-column">
      <h3 class="company">Company</h3>
      <ul>
        <li><a href="kontakt.html">Kontakt</a></li>
        <li><a href="about.html">Über Uns</a></li>
        <li><a href="impressum.html">Impressum</a></li>
      </ul>
    </div>

    <div class="footer-column">
      <h3 class="social">Social</h3>
      <ul>
        <li><a>Twitter</a></li>
        <li><a>Instagram</a></li>
        <li><a>Reddit</a></li>
      </ul>
    </div>

    <div class="footer-column">
      <h3 class="other">other</h3>
      <ul>
        <li><a>other1</a></li>
        <li><a>other2</a></li>
      </ul>
    </div>

  </div>

【问题讨论】：

我也建议使用flex-grow: 1; 而不是width: 33.33%，正如我在您之前的问题中所建议的那样，从flexbox 获得力量。如果你想使用width 至少使用calc(100% / 3)，但flexbox 属性更方便

【参考方案1】：

为什么你需要ul li 没有他们的风格？ Aslo ul 有它的默认值，你可能不想使用它。使用div。

查看sn-p。

我将padding-bottom 添加到.footer-column 并将ul li 更改为div 在html 和css 中

如果你想左对齐 - 删除 text-align: center;

footer 
  width: 100%;
  /*breite: 100%*/
  padding: 0;
  margin: 0;
  background-color: #5490dd;
  /*Hintergrundfarbe*/


.footer-items 
  width: 80%;
  margin: auto;
  display: flex;
  /*bringt alle Teile in eine Linie*/


.footer-column 
  z-index: 2;
  width: 33.33%;
  /*drittelt den Platz im footer*/
  /*text-align: center;*/
  padding-bottom: 16px;


.footer-column div 
  margin: 0;
  padding-top: 5px;


.footer-column div a 
  text-decoration: none;
  /*entfernt das die Links unterstrichen sind*/
  color: rgb(230, 230, 230);
  list-style: none;

<footer>

  <div class="footer-items">

    <div class="footer-column">
      <h3 class="company">Company</h3>
      <div><a href="kontakt.html">Kontakt</a></div>
      <div><a href="about.html">Über Uns</a></div>
      <div><a href="impressum.html">Impressum</a></div>

    </div>

    <div class="footer-column">
      <h3 class="social">Social</h3>

      <div><a>Twitter</a></div>
      <div><a>Instagram</a></div>
      <div><a>Reddit</a></div>

    </div>

    <div class="footer-column">
      <h3 class="other">other</h3>

      <div><a>other1</a></div>
      <div><a>other2</a></div>

    </div>

  </div>