css - 如何将页脚中的文本略微移动

Question

我有一个页脚，我希望其中的所有文本稍微向左移动，这样它看起来更居中。如果我添加边距或更改填充，它们将更改所有 's，我不想这样做。我只想将文本（链接）作为一个整体移动一点。

.footer {
  background: #3E3D3D;
  padding: 0.625rem 0.75rem;
}

.footer_list {
  /*ul*/
  list-style: none;
  text-align: center;
  margin: 0;
}

.footer_lists {
  display: inline-block;
  padding: 0px 1rem;
}

.footer_lists a {
  color: white;
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
}

.footer_lists a:hover,
.footer_lists a:active {
  color: silver;
}

<footer class="footer">
  <ul class="footer_list">
    <li class="footer_lists"><a href="about.html">About Us</a></li>
    <li class="footer_lists"><a href="Contact.html">Contact</a></li>
    <li class="footer_lists"><a href="privacy.html">Privacy Policy</a></li>
  </ul>
</footer>

标签： csspaddingmarginfooter

Answer 1

在<ul>标签上，默认情况下，padding-inline-startCSS 属性值设置为40px. 所以你需要重新设置这个值。

.footer {
  background: #3E3D3D;
  padding: 0.625rem 0.75rem;
}

.footer_list {
  /*ul*/
  list-style: none;
  text-align: center;
  margin: 0;
  padding-inline-start: 0;
}

.footer_lists {
  display: inline-block;
  padding: 0px 1rem;
}

.footer_lists a {
  color: white;
  text-decoration: none;
  font-family: 'Oswald', sans-serif;
}

.footer_lists a:hover,
.footer_lists a:active {
  color: silver;
}

<footer class="footer">
  <ul class="footer_list">
    <li class="footer_lists"><a href="about.html">About Us</a></li>
    <li class="footer_lists"><a href="Contact.html">Contact</a></li>
    <li class="footer_lists"><a href="privacy.html">Privacy Policy</a></li>
  </ul>
</footer>