목록 스타일 스타일로 단락 줄 바꿈 :

Question

목록 항목 내에서 단락으로 일부 목록을 레이아웃하려고합니다. 목록 글 머리 기호는 사용자 지정 이미지이며 컨테이너 폭보다 넓은 단락으로 감싸고 sencond 행은 원하지 않는 목록 이미지 아래에서 시작됩니다. 이 이렇게 될 필요가있다 : enter image description here가 그리고 내가 얻을 것이 이것이다 : enter image description here
내 레이아웃이 있습니다 :

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

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