带有list-style-position的段落换行：inside

Question

我正在尝试使用列表项内的段落来布局一些列表。列表项目符号是自定义图像，其段落宽度超过容器宽度，而第二行则从列表图像下方开始，我不想要。

它需要像：

我得到的是这个：

我的布局是这样的：

ul.steps {
  list-style-type: none;
  margin-left: 10px;
  display: table;
  h4 {
    margin-bottom: 0;
  }
  li {
    background-repeat: no-repeat;
    list-style-position: outside;
    text-indent: 2em;
  }
  li:nth-child(1) {
    background: url(../images/count1.png) no-repeat 0 7px;
  }
  li:nth-child(2) {
    background: url(../images/count2.png) no-repeat 0 7px;
  }
  li:nth-child(3) {
    background: url(../images/count3.png) no-repeat 0 7px;
  }
  li:nth-child(4) {
    background: url(../images/count4.png) no-repeat 0 7px;
  }
}

<ul class="steps">
  <li>
    <div>
      <h4>Зарегистрируйтесь и откройте счет</h4>
      <p>Вы также можете открыть учебный демо-счет, чтобы понять принципы торговли.</p>
    </div>
  </li>
  <li>
    <h4>Установите программу или откройте веб-трейдер в браузере</h4>
    <p>Для работы на Forex необходима торговая платформа. Для вашего удобства мы предлагаем терминал Metatrader, который вы можете бесплатно установить с нашего сайта, и веб трейдер для онлайн торговли в браузере.</p>
  </li>
  <li>
    <h4>Выберите торговую стратегию</h4>
    <p>Спрогнозируйте, возрастет или снизится цена на выбранный вами актив, и на основе прогноза сделайте ставку на продажу или покупку.</p>
  </li>
  <li>
    <h4>Получайте прибыль</h4>
    <p>Средства, полученные от торговли, вы можете вывести любым удобным способом. Мы гарантируем быстрые операции с любыми суммами</p>
  </li>
</ul>
</div>
<!-- /.steps -->

Answer 1

不要缩进文本。

将padding-left添加到li，图像可以在那里的背景中。

ul.steps {
  list-style-type: none;
  margin-left: 10px;
  display: table;
}
h4 {
  margin-bottom: 0;
}
li {
  background-repeat: no-repeat;
  list-style-position: outside;
  padding-left: 2em;
  background: url(http://www.fillmurray.com/g/16/16) no-repeat 0 7px;
}

<ul class="steps">
  <li>
    <h4>Зарегистрируйтесь и откройте счет</h4>
    <p>Вы также можете открыть учебный демо-счет, чтобы понять принципы торговли.</p>

  </li>
  <li>
    <h4>Установите программу или откройте веб-трейдер в браузере</h4>
    <p>Для работы на Forex необходима торговая платформа. Для вашего удобства мы предлагаем терминал Metatrader, который вы можете бесплатно установить с нашего сайта, и веб трейдер для онлайн торговли в браузере.</p>
  </li>
  <li>
    <h4>Выберите торговую стратегию</h4>
    <p>Спрогнозируйте, возрастет или снизится цена на выбранный вами актив, и на основе прогноза сделайте ставку на продажу или покупку.</p>
  </li>
  <li>
    <h4>Получайте прибыль</h4>
    <p>Средства, полученные от торговли, вы можете вывести любым удобным способом. Мы гарантируем быстрые операции с любыми суммами</p>
  </li>
</ul>