如何解决如何将元素定位在左侧、中间和右侧?
如果我的问题有点愚蠢,我很抱歉,但这就像我学习 html/CSS 的第 3 天。请不要建议我使用 JS,因为我对此一无所知(还)。 我需要在屏幕上移动 li 元素,比如 1 个元素必须贴在页面的左侧,另一个在中间,第三个在右侧。 如果我没有表达清楚,请看截图。 谢谢!
.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>
解决方法
你可以使用弹性盒:https://css-tricks.com/snippets/css/a-guide-to-flexbox/
这里您需要间隔对齐。
所以在你的 CSS 中:
.contact-information {
width: 100%;
margin: auto;
display: flex;
justify-content: space-between;
}
,
我已了解您的查询。
使用弹性盒。 试试这个:
.contact-information-title {
font-weight: 500;
text-align: center;
width: 100%;
display : flex;
justify-content : space-around;
}
,
在 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>
好的,谢谢大家。现在已经排序了。 不幸的是,我没有 15 的声望,所以我不能对任何答案投赞成票。 我是如何解决的:
- 我以正确的方式关闭了我的 ol 标签,感谢 s.kuznetsov 指出这一点。
- 然后我为社交媒体项目创建了一个新的 div,再次感谢 s.kuznetsov 提出新 div 的想法。
- 在新创建的 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。