中心无容器的无序列表

Question

我正在尝试创建具有无序列表元素的页脚。在这些列表下面，我要创建另一个具有版权的div容器。

这是我想要实现的

这是我到目前为止的代码

.list {
  list-style: none;
  display: inline-block;
}

#imprintContent {
  border-bottom: 1px solid #656a70;
}

<div id="imprint">
  <div id="imprintContent">
    <ul class="list">
      <li>Company</li>
      <li>Street</li>
      <li>Location</li>
      <li>
        <a href="mailto:test">Mail</a>
      </li>
    </ul>

    <ul class="list">
      <li>Small text</li>
      <li>
        <a href="/privacy">Privacy</a>
      </li>
    </ul>
  </div>
  <div id="copyright">
    © Copyright
  </div>
</div>

如何将这些列表居中放置，在其下方放置一条小线（可能是底部边框），并在此边框下方放置版权？

左右应留有可用空间。您可以在此处看到一个有效的示例页脚

https://www.hashicorp.com/contact

Answer 1

如果您的issee正在使页脚居中，只需使用text-align居中

.list {
  list-style: none;
  display: inline-block;
}

#imprintContent {
  border-bottom: 1px solid #656a70;
}

#imprint {
  text-align:center

}

<div id="imprint">
  <div id="imprintContent">
    <ul class="list">
      <li>Company</li>
      <li>Street</li>
      <li>Location</li>
      <li>
        <a href="mailto:test">Mail</a>
      </li>
    </ul>

    <ul class="list">
      <li>Small text</li>
      <li>
        <a href="/privacy">Privacy</a>
      </li>
    </ul>
  </div>
  <div id="copyright">
    © Copyright
  </div>
</div>

Answer 2

嗨 使用flexbox可以轻松解决此问题。

#imprint{
  margin: 0% 20%; /*this make the free space to the sides, adjust the 20% to the desired number*/
}

#imprintContent{
  display: flex;
  justify-content: center;
  align-items: center;
}

#green{
  background: green;
}

#red{
  background: red;
}

#copyright{
  text-align: center;
}

.list{
  padding: 10%;
  margin: 10%;
}

.list > li{
  margin-top: 4%;
  margin-bottom: 4%;
}

<div id="imprint">
  <div id="imprintContent">
    <ul id="green" class="list">
      <li>Company</li>
      <li>Street</li>
      <li>Location</li>
      <li>
        <a href="mailto:test">Mail</a>
      </li>
    </ul>

    <ul id="red" class="list">
      <li>Small text</li>
      <li>
        <a href="/privacy">Privacy</a>
      </li>
    </ul>
  </div>
  <hr>
  <div id="copyright">
    © Copyright
  </div>
</div>

Answer 3

您可以做到

#imprint { display:table; margin:0 auto; }

Answer 4

这是一个开始。 。 。 body * {...}只是一个重置。

body * {
    margin: 0;
    padding: 0;
}
footer {
    max-width: 60%;
    margin: 0 auto;
}
li {
    list-style-type: none;
}
.lists {
    display: flex;
    margin-bottom: 2rem;
}
.lists__list {
    flex: 1 auto;
}
.footer__copyright {
    border-top: 1px solid black;
    padding-top: 2rem;
    text-align: center;
}

<footer>
    <div class="lists">
        <ul class="lists__list">
            <li>Company</li>
            <li>Street</li>
            <li>Location</li>
            <li>
                <a href="mailto:test">Mail</a>
            </li>
        </ul>
        <ul class="lists__list">
            <li>Small text</li>
            <li>
                <a href="/privacy">Privacy</a>
            </li>
        </ul>
    </div>
    <div class="footer__copyright">
        © Copyright
    </div>
</footer>