CSS дисплей: встроенное свойство с списком-стиль-изображениями: свойство тегов <li>

голоса
17

У меня возникли проблемы с помощью CSS в display:inlineсобственности с list-style-image:собственностью на <li>тегах. В принципе, я хочу , чтобы вывести следующее:

* Link 1  * Link 2

где *представляет собой изображение.

Я делаю это с помощью следующего бита HTML:

<ol class=widgets>
    <li class=l1>Link 1</li>
    <li class=l2>Link 2</li>
</ol>

который стилизован следующий бит CSS:

ol.widgets { list-style-type:none; }

ol.widgets li { display:inline;
                margin-left:10px; }

ol.widgets li.l1 { list-style-image:url(image1.gif); }

ol.widgets li.l2 { list-style-image:url(image2.gif); }

Проблема заключается в том, что , когда элементы списка отображаются рядный, изображения , связанные с элементами списка не отображаются. Они действительно появляются , если я беру в display:inlineсобственность на <li>теге.

Есть ли способ, чтобы сделать изображение появляется, даже когда элементы списка отображаются рядными, или это просто невозможно?

Задан 09/12/2008 в 22:25
источник пользователем
На других языках...                            


6 ответов

голоса
32

Попробуйте использовать float: left(или right) вместо display: inline. Встроенный дисплей заменяет отображение элемента списка, который является то , что добавляет пункты пули.

Ответил 09/12/2008 в 22:30
источник пользователем

голоса
5

Вы хотите, чтобы элементы списка выстраиваться рядом друг с другом, но на самом деле не быть встроенные элементы. Так они плавали вместо этого:

ol.widgets li { 
    float: left;
    margin-left: 10px;
}
Ответил 09/12/2008 в 22:33
источник пользователем

голоса
4

У меня была аналогичная проблема, я решаю с помощью CSS «: раньше» .. код выглядит любит это:

.widgets li:before{
    content:"• ";
}
Ответил 10/07/2013 в 16:02
источник пользователем

голоса
2

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

ol.widgets ul
{
list-style-image:url('some-img.gif');
}
ol.widgets ul li
{
float:left;
}
Ответил 05/07/2012 в 12:43
источник пользователем

голоса
2

Если вы посмотрите на свойства «отображения» в CSS спецификации, вы увидите , что «список-элемент» специально тип дисплея. При установке элемента в «инлайн», вы заменяете тип отображения по умолчанию элемента списка, а маркер именно часть типа элемента списка .

Выше ответ предлагает поплавок, но я пытался , что и он не работает (по крайней мере , на Chrome). Согласно спецификации , если вы установите флажки , чтобы плавать влево или вправо, «„Экран“игнорируется, если оно не имеет значение„Нет“.» Я принимаю это означает , что тип отображения по умолчанию «элемента списка» ушел ( с маркером с ним) , как только вы плаваете элемент.

Edit: Да, я предполагаю, что я был неправ. См пунка. :)

Ответил 09/12/2008 в 22:38
источник пользователем

голоса
1

Я хотел бы предложить , чтобы не использовать list-style-image, так как она ведет себя совершенно по- разному в разных браузерах, особенно положение изображения

вместо этого, вы можете использовать что-то вроде этого

ol.widgets,
ol.widgets li { list-style: none; }
ol.widgets li { padding-left: 20px; backgroud: transparent ("image") no-repeat x y; }

она работает во всех браузерах и даст вам одинаковый результат в разных браузерах.

Ответил 09/12/2008 в 22:44
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more