Перемещение текста вправо CSS

У меня возникла проблема с использованием CSS. Я потратил время, выделенное для завершения целевой работы, но для меня это слишком сложно. Теперь я попрошу всех вас (веб-мастеров/разработчиков) решить мою проблему.Перемещение текста вправо CSS

sidebar urgentfiles.com

Пожалуйста, ознакомьтесь с этой картиной и скажи мне, как я могу переместить вторую строку текста для пуль пронумерованных (3, 5, 6, 8) - Я хочу вторую строку текста, чтобы начать на такое же горизонтальное положение, при котором начинается первый.

Вот CSS этой боковой панели:

.plugins ul{padding-left:0;counter-reset:plugincount;} 

.plugins ul li{border-bottom:1px dashed #ddd;line-height:20px} 

.plugins ul li:before{content:counter(plugincount);counter-increment:plugincount;margin-left:-10px;margin-right:1px;background:#8FC93E;border-radius:25px;border:1px solid #000;color:#fff;font:bold 16px georgia;padding:.3em .6em} 

..plugins ul li{border-bottom:1px dashed #ddd} 

.plugins ul li a{margin-left:10px;} 

.plugins ul li a:hover{text-decoration:none} 

.plugins ul li:hover,.plugins ul li:hover{border-bottom:1px dashed #696969}

Вот оригинальная ссылка сайта: Urgentfiles.com

источник

2014-10-03 Muhammad Nouman Khalid

Вы должны сделать пули быть вне li содержания:

ul li { list-style-position: outside; margin-left: 1em; }

источник

2014-10-03 19:11:01

I'don't получить ваш ответ так, пожалуйста, объясните это –

ли вы попробовать код? Когда создаются пули, у них есть либо по умолчанию «внутри», либо «наружное» позиционирование фактической пули черного круга. Это относится к его позиции относительно элемента 'li'. Если он внутри, то это точно так же, как письмо в тексте пули. Если он снаружи, то выравниваемый слева текст начинается справа от темного круга. –

Здесь вы найдете http://jsfiddle.net/jhkb5jrb/1/

body { 
    counter-reset: my-counter; /* REmove this */ 
} 

ul { 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    width: 300px; 
    counter-reset:plugincount; /* Add this */ 
} 
ul li:before { 
    background: #8fc93e; 
    border: 1px solid #000; 
    border-radius: 100%; 
    color: #ffffff; 
    content:counter(plugincount); /* change from my-counter to plugincount*/ 
    counter-increment:plugincount; /* change from my-counter to plugincount*/   
    float: left; 
    font-family: Georgia; 
    font-size: 16px; 
    font-weight: 700; 
    list-style-type: none; 
    margin-right: 15px; 
    padding: 0.3em 0.6em; 
    position: relative; 
} 
ul li{   
    padding: 0.7em 0; 
} 
ul li a{ 
    text-decoration: none; 
    color: #000000; 
}

источник

2014-10-03 19:44:31

вы ошиблись, потому что я потерял автоматическую нумерацию: D –

Ну вот как решить проблему с позиционированием текста, вы можете добавить свой счетчик вместо моего счетчика :) Я не ошибся, вы хотел решение для конкретной проблемы, и проблема ушла :) –

да, вы правы, проблема ушла вместе с моим счетчиком :) –

, если вы должны поддерживать эту разметку

набор

.plugins ul li {position: relative; padding-left:40px /* set padding bigger then circle */; 
.plugins ul li::before {position: absolute; top: 0; left: 0; margin:0 /*clear margin*/

, но я думаю, что изменение HTML разметка лучше

источник

2016-02-18 08:47:37

Перемещение текста вправо CSS

ответ

Смежные вопросы