如何在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元素？

回答

相關問題