Desaparecendo pontos de bala

Question

http://biochrom.fivesite.co.uk/catalogue4.asp

Na página acima, existe uma imagem flutuou para a esquerda. Para a direita dele é uma lista, intitulado "características". Os itens da lista tem uma imagem de fundo, no entanto, não está aparecendo. Lista 2 mostra como a imagem de fundo aparência.

Alguém sabe como posso fazer as balas visível?

Answer 1

A sua imagem tem um float: left propriedade. Os itens da lista são, portanto, traduzida como "por trás" da imagem.

margin-left:200px;

no elemento UL vai resolver o seu problema.

Como alternativa, você pode aplicar um float: left em seu UL-elemento. Isso vai fazê-lo flutuar direito à imagem, mas vai fazer o seguinte conteúdo aparecem na mesma linha. Você pode evitar isso por limpar o UL-elemento , ou a adição de elemento após o UL-elemento com ...

clear:both

... aplicadas a ele.

Mais informações sobre este comportamento pode ser encontrada no http://www.positioniseverything.net/easyclearing. html .

Answer 2

Eu sei que este é um post anos, mas outros podem querer saber ...

O que acontece se você estiver usando um sistema de gerenciamento de conteúdo e algumas páginas têm imagens e alguns não você não gostaria que sua lista itens a serem 200px no conteúdo?

Você pode adicionar este CSS para o seu elemento UL / OL:

overflow:hidden;

Espero que ajuda.

Answer 3

Esta discussão é velha, de fato, mas sempre relevante ...

Outra solução alternativa:

display: inline-block;

Coloque este na UL . Ela obriga todo o ul a aparecer após o flutuador. Dessa forma, você pode ter uma página com ou sem a imagem e será sempre exibido corretamente (verificado no FF4, IE7 e 8, Chrome 11).

Answer 4

Como alternativa, você pode usar a propriedade list-style-image em vez de background-image. Corri para este problema muito no outro dia:. O comportamento de moldagem de texto que flutua exibem em seus 'vizinhos' só se aplica a 'conteúdo', não imagens de fundo (por exemplo)