如何将元素定位在左侧、中间和右侧？

Question

如果我的问题有点傻，我很抱歉，但这就像我学习的第 3 天 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

我已了解您的问题。

使用 flexbox。试试这个：

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

Answer 2

你可以使用 flexboxes : 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;
}

Answer 3

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

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

.social_text {
  text-align: center;
}

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

#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 4

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

我以正确的方式关闭了我的 ol 标签，感谢 s.kuznetsov 指出这一点。
然后我为社交媒体项目创建了一个新的 div，再次感谢 s.kuznetsov 提出新 div 的想法。
在新创建的 div 中放置 space-between，感谢 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>

如何将元素定位在左侧、中间和右侧？

How can I position elements left, center, and right?

html

css

html-lists