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

Question

我想知道如何将电话图标和电话号码放在一行中。电子邮件图标和电子邮件地址也是如此。我想要两行。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

您可以使用无序列表，并以某种方式将图标和文本添加到列表项。这可能是 db.collection.distinct("type") [ { "hello" : 1, "sad" : 2 }, { "hello" : 1, "sad" : 2, "luck" : 1 } ] 内的 { "hello" : 2, "sad" : 4, "luck" : 1 }} ，旁边有文字，或者您可以使用图标作为伪元素的更多CSS路线。这样，如果您需要在其他地方重新使用图标/联系人格式，则只需要向img添加一个类。

li

li