Question

我正在FreeCodeCamp上做项目，我想在图标旁边放置两行，但是在图标下方有一行，我该如何解决？

p {
  display: inline;
  vertical-align: top;
}

.icon-header {
  font-size: 50px;
  color: black;
  margin-left: 5%;
  display: inline-block;
  vertical-align: top;
}

.icon-text {
  display: inline-block;
  float: left;
  color: black;
  font-size: 14px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" >
<i class="fas fa-hand-holding-usd"><p><span class="icon-header">Low Prices</span><br><span class="icon-text">Our graphics cards are so cheap and affordable for everyone</span></p></i>

Answer 1

您可以使用位置作为图标

p {
    display: inline-block;
    vertical-align: middle;
    padding-left: 44px;
    position: relative;
}
p i{
    position: absolute;
    left: 0;
    top: 15%;
    font-size: 32px;
}
.icon-header {
  font-size: 50px;
  color: black;
  display: block;
  vertical-align: top;
}

.icon-text {
  display: block;
  float: left;
  color: black;
  font-size: 14px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" >
<p><i class="fas fa-hand-holding-usd"></i> <span class="icon-header">Low Prices</span><span class="icon-text">Our graphics cards are so cheap and affordable for everyone</span></p>

多行网状图标

1 个答案: