4行のHTML要素を2行に表示するにはどうすればいいですか？

Question

電話のアイコンと電話番号を1行に入れる方法を知りたい。メールのアイコンとメールアドレスについても同じことが言えます。私は2本のラインを持っていたい。

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">someaddress@gmail.com</p> 
 
</div>

ここで私がこれまで持っているもののスクリーンショットです：

あなたは非順序付きリストを使用すると、リスト項目にアイコンとテキストを追加することができ

Answer 1

何らかの方法で。それは隣にテキストがある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">someaddress@gmail.com</li> 
 
</ul>