Como dispay lista não ordenada em linha com marcadores?

StackOverflow https://stackoverflow.com/questions/34399

  •  09-06-2019
  •  | 
  •  

Pergunta

Eu tenho um arquivo html com uma lista não ordenada.Eu quero mostrar a lista de itens na horizontal, mas ainda assim manter as balas.Não importa o que eu tente, sempre que eu definir um estilo inline para atender o requisito horizontal não é possível obter os marcadores para exibir.

Foi útil?

Solução

A melhor opção que eu vi em outras respostas foi a utilização de float:left;.Infelizmente, ele não funciona no IE7, que é um requisito aqui* — você ainda perde a bala.Eu realmente não estou interessado em utilizar uma imagem de plano de fundo também.

O que eu vou fazer (que ninguém sugeriu, portanto, a auto-resposta) é ir com a adicionar manualmente • para o meu html, ao invés de incluir este estilo.É menos do que o ideal, mas é o mais compatível opção que eu encontrei.

editar: *Atual leitores tome nota do original data de publicação.O IE7 é improvável de ser uma preocupação mais.

Outras dicas

Eu tive o mesmo problema, mas somente no Internet Explorer (eu testei a versão 7) - não no Firefox 3, Safari 3.Usando o :antes de seletor funciona para mim:

ul.tabs li {
  list-style: none;
  float: left;
}
ul.tabs li:before {
  content: '\ffed';
  margin-right: 0.5em;
}

Eu estou usando um quadrado de bala aqui, mas um normal bullet \2022 iria trabalhar mesmo.

Você também pode usar uma imagem de fundo no <li> elementos, com um enchimento para manter o texto sobrepondo-se a ele.

li {
  background-image: url(i/bullet.gif) no-repeat center left;
  padding-left: 20px;
  display: inline;
}

O navegador exibe as balas, porque o estilo de propriedade "display" é definido inicialmente para o "list-item".Alterar a propriedade display para "inline" cancela todos os especiais de estilos que a lista de itens de obter.Você deve ser capaz de simular com o :antes de seletor e a propriedade de conteúdo, mas o IE (pelo menos até a versão 7) não dá suporte para eles.Simulando-a com uma imagem de plano de fundo é, provavelmente, o melhor cross-browser maneira de fazê-lo.

É realmente muito simples de corrigir.Adicione o seguinte para a ul:

display:list-item;

Adicionar este CSS linha irá adicionar o marcador de pontos.

Mantê-los ecrã bloqueado, dê-lhes uma largura e flutuar a esquerda.

Que vai fazê-los sentar-se ao lado, que é como inline, e deverá manter o estilo de lista.

Você quis float: left no seu <li/>?Algo como isto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <style type="text/css">
        ul li {
            float: left;
            margin-left: 2em;
        }
    </style>
</head>
<body>
    <ul>
        <li>test</li>
        <li>test2</li>
    </ul>
</body>
</html>

Eu só testei o Firefox 3.0.1, trabalha lá.O margin é definido porque senão bala sobrepõe-se o item anterior.

adição:Desconfie de que quando você flutuar os itens que você removê-los do fluxo normal, que por sua vez faz com que o <ul/> não ter nenhuma altura.Se você deseja adicionar uma borda ou algo assim, você terá resultados estranhos.

Uma maneira de corrigir isso é para adicionar o seguinte ao seu estilo:

ul {
    overflow: auto;
    background: #f0f;
}

Eu estava apenas brincando e eu tive o mesmo problema com o mesmo navegador restrições;quando eu procurei por uma resposta do seu post veio sem a resposta.Este é, provavelmente, muito tarde para ajudar você, mas eu pensei que, para a posteridade, amor eu deveria postar isso.

Tudo o que fiz para resolver o meu problema foi a incorporar uma outra lista com um item dentro de cada item da lista da primeira lista;como assim...

HTML:

<div class="block-list">
  <ul>
    <li><ul><li>a</li></ul></li>
    <li><ul><li>b</li></ul></li>
    <li><ul><li>c</li></ul></li>
  </ul>
</div>

CSS:

.block-list > ul > li { display: inline; float: left; }

IE7 Página:

    o a o b o c

...ele é um idiota solução, mas parece funcionar.

Você pode usar entidades de Caracteres, consulte a referência : http://dev.w3.org/html5/html-author/charref

<ul class="inline-list>
  <li> &bullet; Your list item </li>
</ul>

Em HTML, eu adicionei uma pausa depois de cada li assim:

<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>
<li>Water is Sacred</li><br>

E o CSS:

li { float:left; }

Você pode usar o seguinte código

li {
    background-image: url(img.gif) no-repeat center left;
    padding-left: 20px;
    display: inline;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top