带列表样式位置的段落换行：内部

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

不要缩进文字。

向li添加padding-left ，图片可以在背景中出现。

 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>