CSS упорядоченный список Проблема

Question

Я упорядоченный список, который я пытаюсь разметить HTML можно увидеть ниже:

<ol class="main tags"> 
    <li class="main">Gump...</li> 
    <li>We ar...</li> 
    <li>We a...</li> 
</ol> 

CSS-выглядит следующим образом:

ol.tags { 
    list-style: decimal none outside;  
} 

ol.tags li { 
    background: transparent url(../images/tag.jpg) no-repeat; 
    height: 80px; 
    margin: 0px 0px 0px 0px; 
    padding: 16px 0px 0px 60px; 
} 

И результат выглядит как это:

http://gumpshen.com/images/temp/Gumpshen_OL.png

Я хочу, чтобы иметь номер появляется cenetered внутри капельки e «вкладки», может ли кто-нибудь помочь?

Answer 1

вы можете использовать

background: transparent url(../images/tag.jpg) no-repeat; для ol.tags, не ol.tags li

Answer 2

Эй Берт, чем Sortiris указывает вне где ваш список заказа имеет вид работы повторять фон увидеть хорошее объяснение здесь: http://codeasily.com/css/style-ordered-list

Я пытался сделать то, о чем вы говорите, но я боюсь, что это будет невозможно, без специальных номеров или маркеров.

Вы на правильном пути, но я бы сделал ol list style inside, тогда вам все же нужно выяснить способ подтолкнуть номер списка заказов от содержимого списка.

Похоже, вы захотите добавить свой собственный счетчик в свой список.

Answer 3

Один из вариантов может заключаться в том, чтобы увеличить изображение вашего белого квадрата, чтобы оно было таким же высоким, как высота, в которой вы хотите, чтобы ваши лики были. Затем сделайте его фоном ol вместо li и повторите его в направлении y.

Другим вариантом было бы, чтобы переключить ol иметь стиль inside, как упоминалось ранее, а затем придерживаться span внутри вашего li с некоторой padding-left позиционировать его, где вы хотите.

Редактировать: сделав изображение белого квадрата более крупным, я имею в виду добавление прозрачной «прокладки» или что-то, что соответствует фону страницы. Таким образом, изображение имеет большие размеры, но белая область остается неизменной.

Answer 4

Сортировано это вот что я сделал:

Сначала я добавил поверочного тег вокруг содержания:

<ol class="main tags"> 
    <li class="main"><span>Gumpshen was founded by Brendan Rice who has over 10 years experience in web development.</span></li> 
    <li><span>We are web design & development studio who are passionate about what we do.</span></li> 
    <li><span>We are based in Belfast, Northern Ireland and but don't let that put you off if you are not from Northern Ireland we would still love to help.</span></li> 
</ol> 

Я переместил десятичные внутрь, как предложил joelt (спасибо Джо) и наконец, смог сдвинуть материал с использованием минус-полей на тегах span:

ol.tags { 
    list-style: decimal none inside; 

} 

ol.tags li { 
    background: transparent url(../images/tag.jpg) no-repeat;  
    height: 80px; 
    margin: 0px 0px 0px 0px; 
    padding: 26px 0px 0px 20px; 
} 

ol.tags li span {  
    margin: -24px 0px 0px 50px; 
    display: block; 
}