图像旁边的特殊缩进文本答案

【问题标题】：Special indent text next to image图像旁边的特殊缩进文本
【发布时间】：2018-03-03 11:41:13
【问题描述】：

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

这就是我目前得到的：

.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) 正在生成一个换行符，这导致我的文本向左浮动。但我希望这些行像句子中的第一个词一样缩进。看看这个：

【问题讨论】：

标签： javascript html css text styles

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：