图像旁边的特殊缩进文字

Question

我想生成一些特定的样式，左侧有一个图像（图标），图标旁边有一些描述（纯文本）。

所以这就是我到目前为止所得到的：

.elem {
  margin-left: 7%; 
  position: relative; 
  width: 100%;
}

.text {
  display: inline;
  vertical-align:middle;
}

.img {
  width: 5%; 
  vertical-align:middle;
}

<div class="elem">
   <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png"/>
   <span class="text">
     (1) This is a example text
   </span>
</div>

<br>

<div class="elem">
   <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png"/>
   <span class="text">
     (2) <b>This is a LONG example text, because this is a LONG example text while it's a LONG example text also this is a LONG example text, also because this is a LONG example text while all is a LONG example text</b>
   </span>
</div>
<br>

<div class="elem">
   <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png"/>
   <span class="text">
     (3) This is a example text
   </span>
</div>
                                   

你可以看到它工作得很好，但带有长文本的second elem (div)会产生一个换行符，导致我的文本浮动到左边。但是我希望这些行能像句子中的第一个单词一样缩进。看看这个：

Answer 1

您可以像这样尝试flex：

.elem {
  margin-left: 7%;
  display:flex;
  align-items:flex-start;
  padding-top:5px;
  margin-bottom:10px;
}

.img {
  width: 30px;
  margin-top:-5px;
}

<div class="elem">
  <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png" >
   (1)
  <span class="text">
     This is a example text
   </span>
</div>

<div class="elem">
  <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png" >
  (2)
  <span class="text">
      <b>This is a LONG example text, because this is a LONG example text while it's a LONG example text also this is a LONG example text, also because this is a LONG example text while all is a LONG example text</b>
   </span>
</div>

<div class="elem">
  <img class="img" src="https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png" >
  (3)
  <span class="text">
      This is a example text
   </span>
</div>

Answer 2

你可以用这个做更轻的标记

li {
  list-style: none;
  display: flex;
  margin-bottom: 10px;
}

li>span {
  margin-right: 5px;
}

li:before {
  content: '';
  display: block;
  height: 32px;
  width: 32px;
  min-width: 32px;
  margin-right: 10px;
  background-image: url(https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png);
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

<ul>
  <li><span>(1)</span> This is a example text</li>
  <li><span>(2)</span> This is a LONG example text, because this is a LONG example text while it's a LONG example text also this is a LONG example text, also because this is a LONG example text while all is a LONG example text</li>
  <li><span>(3)</span> This is a example text</li>
</ul>

这很简单，因为如果每行需要相同的图标，但如果您需要某行的不同图标，您可以使用li:nth-child(n)定位该行或为其指定一些类，并指定一个background-image: url()

如果你想将一个图标对齐到第一行的中心，你可以做这个小技巧：

li {
  list-style: none;
  display: flex;
  padding-top: 5px;
  margin-bottom: 5px;
}

li>span {
  margin-right: 5px;
}

li:before {
  margin-top: -5px;
  content: '';
  display: block;
  height: 32px;
  width: 32px;
  min-width: 32px;
  margin-right: 10px;
  background-image: url(https://d30y9cdsu7xlg0.cloudfront.net/png/172871-200.png);
  -webkit-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
}

<ul>
  <li><span>(1)</span> This is a example text</li>
  <li><span>(2)</span> This is a LONG example text, because this is a LONG example text while it's a LONG example text also this is a LONG example text, also because this is a LONG example text while all is a LONG example text</li>
  <li><span>(3)</span> This is a example text</li>
</ul>