使用 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>

使用 list-style-position: inside 段落换行

Paragraph wrap with list-style-position: inside

html

css

list

paragraph