如何在2行（每一个两个元素）上显示4个HTML元素？-英雄云拓展知识分享

匿名投稿 159 2024-01-22

我想弄清楚如何将电话图标和一条电话号码放在一行中。电子邮件图标和电子邮件地址也是如此。我想有两行。

body {font-family: 'Open Sans', sans-serif;
background: #20b2aa;
}
h1 {
font-size: 40px;
color: white;
background: black;
width: 600px;
margin: auto;
}
.info {
background: white;
width: 600px;
height: 150px;
margin: auto;
}
#phoneNumber, #emailAddress {
padding-top: 5px;
padding-bottom: 5px;
}
img {
background: red;
}
p {
background: green;}

<h1>Contact Me</h1><div class="info">
<h3>Eugene</h3>
<img id="phoneImage" src="img/phone.png">
<p id="phoneNumber">(800) 123⑷000</p>
<img id="envelopeImage" src="img/envelope.png" alt="">
<p id="emailAddress">[email protected]</p></div>

这是我迄今为止所具有的屏幕截图：

看答案

您可使用未订购的列表，并以某种方式将图标和文本添加到列表项目中。那多是 img 在 - 的里面 li 在旁边的文本中，您可以将更多的CSS线路与图标作为伪元素。这样，如果您需要在其他地方重新使用图标/联系格式，则只需要在 li.

.contact-info {margin: 0;
padding: 0;
list-style: none;
}
.contact-info .phone::before,
.contact-info .email::before {
content: '';
display: inline-block;
width: 15px;
height: 15px;
margin-right: 0.25rem;
vertical-align: middle;
}
.contact-info .phone::before {
background-image: url( 'http://placehold.it/10x10/fc0' );
}
.contact-info .email::before {
background-image: url( 'http://placehold.it/10x10/' );}

<h1>Contact Me</h1><h3>Eugene</h3>
<ul class="contact-info">
<li class="phone">(800) 123⑷000</li>
<li class="email">[email protected]</li></ul>

🚀🌟 点击注册免费试用超级应用平台-英雄云企业级 hpaPaaS 🌟🚀 😃👉🌐

免责声明：

本网址（www.yingxiongyun.com）发布的材料主要源于独立创作和网友匿名投稿。此处提供的所有信息仅供参考之用。我们致力于提供准确且可信的信息，但不对材料的完整性或真实性作出任何保证。用户应自行验证相关信息的正确性，并对其决策承担全部责任。对于由于信息的错误、不准确或遗漏所造成的任何损失，本网址不承担任何法律责任。本网站所展示的所有内容，如文字、图像、标志、音频、视频、软件和程序等的版权均属于原创作者。如果任何组织或个人认为网站内容可能侵犯其知识产权，或包含不准确之处，请即刻联系我们进行相应处理。