Html 如何将元素放置在左侧、中间和右侧？

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

。联系人信息主容器{
宽度：100%；
字体大小：3vw；
}
.联络资料{
宽度：100%；
保证金：自动；
}
.联系信息标题{
字号：500；
文本对齐：居中；
宽度：100%；
}
.联络资料项目{
/*浮动：左*/
字体系列：“Langar”；
高度：自动；
垫面：1%；
}
.联系方式{
左缘：1%；
}
#社交媒体facebook{
利润率最高：1%；
左：3%；
列表样式：无；
背景图片：url（“../img/contact-images/facebook-new.png”）；
背景重复：无重复；
背景位置：左中；
背景大小：20%；
显示：内联；
}
#社交媒体instagram{
利润率最高：1%；
左：3%；
列表样式：无；
背景图片：url（“../img/contact-images/instagram.png”）；
背景重复：无重复；
背景位置：左中；
背景大小：20%；
显示：内联；
}
#社交媒体whatsapp{
利润率最高：1%；
左：3%；
列表样式：无；
背景图片：url（“../img/contact-images/whatsapp.png”）；
背景重复：无重复；
背景位置：左中；
背景大小：20%；
显示：内联；
}
#社交媒体容器{
显示：内联；
保证金：自动；
}
#社交媒体标题{
文本对齐：居中；
}

社会的

我理解你的疑问

使用flexbox。 试试这个：

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

您可以使用FlexBox：

这里需要在对齐之间留出一个空间

因此，在CSS中：

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

---

在

html

中，您犯了一个错误。您的

ol

标签未在正确的位置关闭。这是包装

li

标记所需的内容。在我的示例中，我解决了这个问题

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

.social_text {
  text-align: center;
}

Css

flex

选择器中的规则

#社交媒体标题ol

执行以下操作：

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

。联系人信息主容器{
宽度：100%；
字体大小：3vw；
}
.社会教育文本{
文本对齐：居中；
}
.联络资料{
宽度：100%；
保证金：自动；
}
.联系信息标题{
字号：500；
文本对齐：居中；
宽度：100%；
}
.联络资料项目{
/*浮动：左*/
字体系列：“Langar”；
高度：自动；
垫面：1%；
}
.联系方式{
左缘：1%；
}
#社交媒体facebook{
/*利润率最高：1%*/
/*左：3%*/
列表样式：无；
背景图片：url（“../img/contact-images/facebook-new.png”）；
背景重复：无重复；
背景位置：左中；
背景大小：20%；
显示：内联；
}
#社交媒体instagram{
/*利润率最高：1%*/
/*左：3%*/
列表样式：无；
背景图片：url（“../img/contact-images/instagram.png”）；
背景重复：无重复；
背景位置：左中；
背景大小：20%；
显示：内联；
}
#社交媒体whatsapp{
/*利润率最高：1%*/
/*左：3%*/
列表样式：无；
背景图片：url（“../img/contact-images/whatsapp.png”）；
背景重复：无重复；
背景位置：左中；
背景大小：20%；
显示：内联；
}
#社交媒体容器{
显示：内联；
保证金：自动；
}
#社交媒体标题{
显示器：flex；
证明内容：之间的空间；
填充：0；
保证金：0；
}

社会的

好了，伙计们，谢谢大家。现在已经分类了。 不幸的是，我没有15个声望，所以我不能对任何答案进行投票。 我是如何解决的：

我以正确的方式关闭了我的ol标签，感谢s.库兹涅佐夫指出这一点

然后，我为社交媒体项目创建了一个新的div，再次感谢s.kuznetsov提出了新div的想法

在新创建的div中放置空格，感谢Arthur的想法

再次感谢大家！

。社交媒体项目{
显示器：flex；
证明内容：之间的空间；
保证金权利：1%；
}

社会的

请查看此文件。使用flexbox，您可以在css中定位几乎所有内容。一些解释（或解释性资源链接）将使其更加有用。