Как отодвинуть список с маркерами вправо от картинки в шаблоне Битрикса?

Question

[HankMoooody]

Добрый день.

Есть проблема. Удаётся управлять отступом списка с маркерами с левой стороны от начала блока. Но если слева сначала находится картинка, то слова списка отодвигаются только на margin картинки, а сами точечки находятся впритык.


Вот код из шаблона, который, как я понимаю, отвечает за это дело:

intec-ui-markup-ul,[data-ui-markup=ol],[data-ui-markup=ul],ol,ul{margin:0 0 20px 0;padding:0 0 0 25px}.intec-ui-markup-ol,[data-ui-markup=ol],ol{counter-reset:li}.intec-ui-markup-ol>.intec-ui-markup-li,.intec-ui-markup-ul>.intec-ui-markup-li,[data-ui-markup=ol]>[data-ui-markup=li],[data-ui-markup=ul]>[data-ui-markup=li],ol>li,ul>li{position:relative;margin:0 0 2px 0;padding:0 0 0 1.42857143em;list-style:none}.intec-ui-markup-ol>.intec-ui-markup-li:before,.intec-ui-markup-ul>.intec-ui-markup-li:before,[data-ui-markup=ol]>[data-ui-markup=li]:before,[data-ui-markup=ul]>[data-ui-markup=li]:before,ol>li:before,ul>li:before{content:" ";display:inline-block;vertical-align:top;position:absolute;top:auto;right:auto;bottom:auto;left:0;bottom:auto;color:#2d2d2d}.intec-ui-markup-ul>.intec-ui-markup-li:before,[data-ui-markup=ul]>[data-ui-markup=li]:before,ul>li:before{content:"\25cf";font-size:.85714286em;padding:.07142858em 0}.intec-ui-markup-ol>.intec-ui-markup-li:before,[data-ui-markup=ol]>[data-ui-markup=li]:before,ol>li:before{content:counter(li) ". "!important;counter-increment:li}.intec-ui-markup-ol.intec-ui-mod-simple>.intec-ui-markup-li,.intec-ui-markup-ul.intec-ui-mod-simple>.intec-ui-markup-li,.intec-ui-mod-simple[data-ui-markup=ol]>[data-ui-markup=li],.intec-ui-mod-simple[data-ui-markup=ul]>[data-ui-markup=li],ol.intec-ui-mod-simple>li,ul.intec-ui-mod-simple>li{padding-left:0}.intec-ui-markup-ol.intec-ui-mod-simple>.intec-ui-markup-li:before,.intec-ui-markup-ul.intec-ui-mod-simple>.intec-ui-markup-li:before,.intec-ui-mod-simple[data-ui-markup=ol]>[data-ui-markup=li]:before,.intec-ui-mod-simple[data-ui-markup=ul]>[data-ui-markup=li]:before,ol.intec-ui-mod-simple>li:before,ul.intec-ui-mod-simple>li:before{content:none;display:none}.intec-ui-markup-table-responsive,.intec-ui[data-ui-markup=table-responsive]{display:block;border:#dbdbdb 1px solid;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar}.intec-ui-markup-table-responsive>table.intec-ui-markup-table,.intec-ui-markup-table-responsive>table[data-ui-markup=table],.intec-ui[data-ui-markup=table-responsive]>table.intec-ui-markup-table,.intec-ui[data-ui-markup=table-responsive]

В общем подскажите, как сделать, чтобы относительно картинки список отображался так же, как и под ней.

Comments

[Павел]

В Вашем коде ничего не разобрать.
Задайте padding-right картинке.

[HankMoooody]

Он задан. Текст как раз и отступает на это расстояние.

Answer 1

[archelon]

Битрикс ни при чем, это старая известная проблема со списком и обтекаемым элементом слева.
Один из вариантов решения:

ul li {
    position: relative;
    left: 1em; 
}

jsfiddle.net/mblase75/TJELt

Comments

[Froggyweb]

так очень не не очень.
лучше margin или padding