css обосновать проблему содержания в нижнем колонтитуле - PullRequest
Новая
       47

css обосновать проблему содержания в нижнем колонтитуле

0 голосов
/ 16 февраля 2020

У меня есть нижний колонтитул, и я хочу, чтобы мои элементы списка были выровнены с моим h3. Есть ли способ сделать это?

Теперь company и social и other немного больше, чем остальные. Я уже поставил justify-content: center, но кажется, что заголовки имеют другой центр, чем элементы моего списка. Надеюсь, кто-нибудь может мне помочь.

enter image description here 

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>

1 Ответ

1 голос
/ 16 февраля 2020

Зачем вам нужно ul li без их стилей? Aslo ul имеет свои значения по умолчанию, которые, возможно, вы не хотите использовать. Используйте div.

Просмотрите фрагмент.

Я добавил 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>
...