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

时间：2021-01-03 15:46:35

标签： html css html-lists

如果我的问题有点愚蠢，我很抱歉，但这就像我学习 html/CSS 的第 3 天。请不要建议我使用 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>

4 个答案:

答案 0 :(得分：1)

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

这里您需要间隔对齐。

所以在你的 CSS 中：

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

答案 1 :(得分：0)

我已了解您的查询。

使用弹性盒。 试试这个：

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

答案 2 :(得分：0)

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

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

.social_text {
  text-align: center;
}

选择器 flex 中的 CSS #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>

答案 3 :(得分：0)

好的，谢谢大家。现在已经排序了。 不幸的是，我没有 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>

相关问题
最新问题