CSS largura fixa em um vão

Dentro de uma lista não ordenada:

<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>

A adição de uma classe ou atributo de estilo é permitida, mas o preenchimento do texto e a adição ou alteração de tags não é permitida.

A página está a renderizar com Courier New.

O objectivo é ter o texto depois do intervalo alinhado.

    The lazy dog.
AND The lazy cat.
OR  The active goldfish.

Justificativa do "OR" não tem importância.

O texto do animal preguiçoso pode ser envolvido em um elemento adicional, mas I'terá que verificar duas vezes.

Shaeldon
Pergunta editada :em
Programação
html css
2º novembro 2008 в 10:36
14 vistas
Solução
ul {
    list-style-type: none;
    padding-left: 0px;
}

ul li span { 
    float: left;
    width: 40px;
}
<ul>
    <li><span></span> The lazy dog.</li>
    <li><span>AND</span> The lazy cat.</li>
    <li><span>OR</span> The active goldfish.</li>
</ul>

Como Eoin disse, você precisa colocar um espaço não quebrado no seu "vazio" vãos, mas você pode'não atribuir uma largura a um elemento em linha, apenas estofamento/margem para que você'precisará fazê-lo flutuar para que você possa dar-lhe uma largura.

Para um exemplo de jsfiddle, veja http://jsfiddle.net/laurensrietveld/JZ2Lg/

PythonDev
Resposta editada :em
Comentários (9)

Infelizmente os elementos em linha (ou elementos com display:inline) ignoram a propriedade largura. Você deve usar mergulhos flutuantes em seu lugar:


div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }


<div class="f1"></div><div class="f2">The Lazy dog</div><div class="f3"></div>
<div class="f1">AND</div><div class="f2">The Lazy cat</div><div class="f3"></div>
<div class="f1">OR</div><div class="f2">The active goldfish</div><div class="f3"></div>

Agora vejo que precisas de usar intervalos e listas, por isso precisamos de reescrever isto um pouco:



        span.f1 { display: block; float: left; clear: left; width: 60px; }
    li { list-style-type: none; }



<ul>
<li><span class="f1"> </span>The lazy dog.</li>
<li><span class="f1">AND</span> The lazy cat.</li>
<li><span class="f1">OR</span> The active goldfish.</li>
</ul>
Tamas Czinege
Resposta editada :em
Comentários (2)

Você pode fazê-lo usando uma tabela, mas não é puro CSS.


ul{
    text-indent: 40px;
}

li{
    list-style-type: none;
    padding: 0;
}

span{
    color: #ff0000;
    position: relative;
    left: -40px;
}


<ul>
<span></span><li>The lazy dog.</li>
<span>AND</span><li>The lazy cat.</li>
<span>OR</span><li>The active goldfish.</li>
</ul>

Note que ele não'não é exibido exatamente como você quer, porque ele muda de linha em cada opção. No entanto, espero que isto o ajude a aproximar-se da resposta.

Comentários (0)