如何定位元素的左侧、中心和右侧？ [复制]

Question

如果我的问题有点愚蠢，我很抱歉，但这就像我学习 html/CSS 的第三天。请不要建议我使用 JS，因为我不知道（还）。 我需要在屏幕上移动 li 元素，比如 1 个元素必须贴在页面的左侧，另一个要贴在中间，第三个要贴在右侧。 如果我没有表达清楚，请看截图。 谢谢！

The screenshot

.contact-information-main-container {
  width: 100%;
  font-size: 3vw;
}

.contact-information {
  width: 100%;
  margin: auto;
}
.contact-information-title {
  font-weight: 500;
  text-align: center;
  width: 100%;
}
.contact-information-item {
  /* float: left; */
  font-family: "Langar";
  height: auto;
  padding-top: 1%;
}

.contact-link {
  margin-left: 1%;
}
#social-media-facebook {
  margin-top: 1%;
  padding-left: 3%;
  list-style: none;
  background-image: url("../img/contact-images/facebook-new.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20%;
  display: inline;
}
#social-media-instagram {
  margin-top: 1%;
  padding-left: 3%;
  list-style: none;
  background-image: url("../img/contact-images/instagram.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20%;
  display: inline;
}
#social-media-whatsapp {
  margin-top: 1%;
  padding-left: 3%;
  list-style: none;
  background-image: url("../img/contact-images/whatsapp.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20%;
  display: inline;
}
#social-media-container {
  display: inline;
  margin: auto;
}
#social-media-title-ol {
  text-align: center;
}

<!-- contact information container -->
    <div id="social-media-container" class="contact-information">
        <ol id="social-media-title-ol" class="contact-information-title">Social</ol>
            <li id="social-media-facebook" class="contact-information-item">
                <a id="social-media-item" class="contact-link" href="https://facebook.com">Facebook</a>
            </li>
            <li id="social-media-instagram" class="contact-information-item">
                <a id="social-media-item" class="contact-link" href="https://instagram.com">Instagram</a>
            </li>
            <li id="social-media-whatsapp" class="contact-information-item">
                <a id="social-media-item" class="contact-link" href="https://web.whatsapp.com/">WhatsApp</a>
            </li>
    </div>

Answer 1

好的，谢谢大家。现在已经整理好了。 不幸的是，我没有 15 名声望，所以我不能对任何答案投赞成票。 我是如何解决的：

1. 我以正确的方式关闭了我的 ol 标签，感谢 s.kuznetsov 指出这一点。
2. 然后我为社交媒体项目创建了一个新 div，再次感谢 s.kuznetsov 提出新 div 的想法。
3. 在新创建的 div 中放置空格，感谢 Arthur 的创意。

再次非常感谢您！

.social-media-items {
  display: flex;
  justify-content: space-between;
  margin-right: 1%;
}

<!-- contact information container -->
    <div id="social-media-container" class="contact-information">
        <ol id="social-media-title-ol" class="contact-information-title">Social
        
        <!-- social media items -->
        <div class="social-media-items">
            <li id="social-media-facebook" class="contact-information-item">
                <a id="social-media-item" class="contact-link" href="https://facebook.com">Facebook</a>
            </li>
            <li id="social-media-instagram" class="contact-information-item">
                <a id="social-media-item" class="contact-link" href="https://instagram.com">Instagram</a>
            </li>
            <li id="social-media-whatsapp" class="contact-information-item">
                <a id="social-media-item" class="contact-link" href="https://web.whatsapp.com/">WhatsApp</a>
            </li>
        </ol>
        </div>

Answer 2

在html 中你犯了一个错误。您的 ol 标签未在正确的位置关闭。这就是包装li 标签所需的内容。在我的示例中，我解决了这个问题。

我将文本 Social 包装在一个 div 中，给他一个类，使用 css 规则：

.social_text {
  text-align: center;
}

选择器 #social-media-title-ol 中的 CSS flex 规则这样做：

#social-media-title-ol {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

.contact-information-main-container {
  width: 100%;
  font-size: 3vw;
}

.social_text {
  text-align: center;
}

.contact-information {
  width: 100%;
  margin: auto;
}
.contact-information-title {
  font-weight: 500;
  text-align: center;
  width: 100%;
}
.contact-information-item {
  /* float: left; */
  font-family: "Langar";
  height: auto;
  padding-top: 1%;
}

.contact-link {
  margin-left: 1%;
}
#social-media-facebook {
  /*margin-top: 1%;*/
  /*padding-left: 3%;*/
  list-style: none;
  background-image: url("../img/contact-images/facebook-new.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20%;
  display: inline;
}
#social-media-instagram {
  /*margin-top: 1%;*/
 /*padding-left: 3%;*/
  list-style: none;
  background-image: url("../img/contact-images/instagram.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20%;
  display: inline;
}
#social-media-whatsapp {
  /*margin-top: 1%;*/
  /*padding-left: 3%;*/
  list-style: none;
  background-image: url("../img/contact-images/whatsapp.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20%;
  display: inline;
}
#social-media-container {
  display: inline;
  margin: auto;
}
#social-media-title-ol {
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}

<!-- contact information container -->
<div id="social-media-container" class="contact-information">
  <div class="social_text">Social</div>
  <ol id="social-media-title-ol" class="contact-information-title">
    <li id="social-media-facebook" class="contact-information-item">
      <a id="social-media-item" class="contact-link" href="https://facebook.com">Facebook</a>
    </li>
    <li id="social-media-instagram" class="contact-information-item">
      <a id="social-media-item" class="contact-link" href="https://instagram.com">Instagram</a>
    </li>
    <li id="social-media-whatsapp" class="contact-information-item">
      <a id="social-media-item" class="contact-link" href="https://web.whatsapp.com/">WhatsApp</a>
    </li>
  </ol>
</div>

Answer 3

我已了解您的问题。

使用弹性框。 试试这个：

.contact-information-title {
  font-weight: 500;
  text-align: center;
  width: 100%;
  display : flex;
  justify-content : space-around;
}

Answer 4

您可以使用弹性框：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

这里你想要一个 space-between 对齐方式。

所以在你的 CSS 中：

.contact-information {
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}