Question

我需要在图标JSFiddle Example的右侧放置一个段落：

  <i class="material-icons">check_circle_outline</i>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec fermentum urna, at convallis turpis. Aliquam luctus mauris arcu, eu sodales mauris sagittis at.
  </p>

使用以下CSS：

i {
  font-size: 36px!important;
  display: inline-block;
}

p {
  display: inline-block;
}

它们不会并排出现...

我想念什么？

Answer 1

尝试一下

i {
  font-size: 36px!important;
  position:relative;
  width:35px;
}

p {
  display: inline-block;
  width:85%;
}

div {
  width: 100%;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
      
<div>
  <i class="material-icons">check_circle_outline</i>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec fermentum urna, at convallis turpis. Aliquam luctus mauris arcu, eu sodales mauris sagittis at.
  </p>
</div>

Answer 2

尝试他的

CSS

.table{
 display: table;
width: 100%;
}
.tablecellleft{
 display: table-cell;
 width: 10px;
}
.tablecellright{
 display: table-cell;
 vertical-align: top;
}

HTML

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

 <div class="table">
 <div class="tablecellleft">
<i class="material-icons icon">check_circle_outline</i>
 </div>
 <div class="tablecellright">
  ..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text..... here is the text
 </div>
</div>

将图标放在段落左侧

2 个答案: