exibição CSS: propriedade linha list-style-image com: propriedade em tags <li>

votos
17

Estou tendo um problema usando o CSS display:inlinepropriedade com a list-style-image:propriedade de <li>tags. Basicamente, eu quero saída o seguinte:

* Link 1  * Link 2

em que *representa uma imagem.

Estou fazendo isso com o seguinte trecho de HTML:

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

que é denominado com o seguinte trecho de 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); }

O problema é que, quando os itens da lista são exibidos em linha, as imagens associadas com os itens da lista não aparecem. Eles não parecem se eu tirar a display:inlinepropriedade sobre a <li>tag.

Existe uma maneira de fazer as imagens aparecem mesmo quando os itens da lista são exibidos em linha, ou isso é apenas impossível?

Publicado 09/12/2008 em 22:25
fonte usuário
Em outras línguas...                            


6 respostas

votos
32

Tente usar float: left(ou right) em vez de display: inline. Exibição em linha substitui exibição de item de lista, que é o que adiciona os pontos de bala.

Respondeu 09/12/2008 em 22:30
fonte usuário

votos
5

Você quer que os itens da lista para alinhar ao lado do outro, mas não realmente ser elementos inline. Então flutuar-los em vez disso:

ol.widgets li { 
    float: left;
    margin-left: 10px;
}
Respondeu 09/12/2008 em 22:33
fonte usuário

votos
4

Eu tive problema semelhante, eu resolvo usando css ": antes de" .. o código olha gostos isto:

.widgets li:before{
    content:"• ";
}
Respondeu 10/07/2013 em 16:02
fonte usuário

votos
2

Imagem do estilo e Nav com flutuador para o outro você quer, então usar como esta

ol.widgets ul
{
list-style-image:url('some-img.gif');
}
ol.widgets ul li
{
float:left;
}
Respondeu 05/07/2012 em 12:43
fonte usuário

votos
2

Se você olhar para a propriedade 'display' na especificação CSS, você vai ver que 'list-item' é especificamente um tipo de exibição. Quando você define um item para "inline", você está substituindo o tipo de exibição padrão da lista de itens, e o marcador é especificamente uma parte do tipo de item de lista .

A resposta acima sugere float, mas eu tentei isso e ele não funciona (pelo menos no Chrome). De acordo com a especificação , se você definir suas caixas para flutuar para a esquerda ou direita, "O 'display' é ignorado, a menos que tenha o valor 'none'." Eu levar isto para dizer que o tipo de exibição padrão de 'list-item' é ido (tendo o marcador com ele), logo que você flutuar o elemento.

Edit: Sim, eu acho que eu estava errado. Veja entrada superior. :)

Respondeu 09/12/2008 em 22:38
fonte usuário

votos
1

Eu sugeriria para não usar list-style-image, como ele se comporta de forma bastante diferente em diferentes navegadores, especialmente a posição da imagem

em vez disso, você pode usar algo como isto

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

ele funciona em todos os navegadores e lhe daria o resultado idêntico em diferentes navegadores.

Respondeu 09/12/2008 em 22:44
fonte usuário

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