如何在2行（每个都有两个元素）显示4个HTML元素？

-1

我想弄清楚如何在一行中放置电话图标和电话号码。电子邮件图标和电子邮件地址也是如此。我想要两条线。如何在2行（每个都有两个元素）显示4个HTML元素？

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-4000</p> 
 
    <img id="envelopeImage" src="img/envelope.png" alt=""> 
 
    <p id="emailAddress">[email protected]</p> 
 
</div>

这里是我到目前为止的截图：

screenshot

来源

2017-07-06 Eugene Bogdanovich

化妆IMG和p标签显示inline; –

你的问题是什么？你是要我们为你写标记吗？ – Rob

你可以使用一个未排序的列表和图标和文本添加到列表项某种程度上来说。这可能是li中的一个img，其旁边有文本，或者您可以使用更多的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-4000</li> 
 
    <li class="email">[email protected]</li> 
 
</ul>

来源

2017-07-06 14:28:42 hungerstar

如何在2行（每个都有两个元素）显示4个HTML元素？

回答

相关问题