Largura fixa CSS em um intervalo

381

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>

É permitido adicionar um atributo de classe ou estilo, mas não é permitido preencher o texto e adicionar ou alterar tags.

A página está sendo renderizada com Courier New.

O objetivo é alinhar o texto após o período.

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

A justificativa do "OR" não é importante.

O texto animal preguiçoso pode ser envolvido em um elemento adicional, mas terei que verificar novamente.

html css jason saldo
fonte

Respostas:

427 

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>
Expandir snippet

Como Eoin disse, você precisa colocar um espaço sem interrupção em seus vãos "vazios", mas não pode atribuir uma largura a um elemento em linha, apenas preenchimento / margem, para que seja necessário flutuar para que você possa dê uma largura.

Para um exemplo do jsfiddle, consulte http://jsfiddle.net/laurensrietveld/JZ2Lg/

Stephen Caldwell
fonte
11
<span> é um elemento embutido por padrão - e flutuá-lo não dará uma largura.
codeinthehole
56
A propriedade float gera uma "caixa de bloco" que possui uma largura.
Stephen Caldwell
83
Deveria ser diplay: inline-block; width: 32px;feito na maioria dos navegadores modernos.
Paulo Bueno
2
@ Randy Marsh - não, a propriedade width só tem efeito porque a propriedade float altera o elemento para uma exibição de bloco, como Stephen Caldwell descreve acima.
Codigo_do_correio
14
@PauloBueno, você pode mudar diplaypara ler display, BTW, funciona para mim. graças
basarat
507

Em um mundo ideal, você conseguiria isso simplesmente usando o seguinte css

<style type="text/css">

span {
  display: inline-block;
  width: 50px;
}

</style>

Isso funciona em todos os navegadores, exceto o FF2 e abaixo.

O Firefox 2 e inferior não suportam esse valor. Você pode usar -moz-inline-box, mas esteja ciente de que não é o mesmo que inline-block e pode não funcionar como o esperado em algumas situações.

Citação de quirksmode

codeinthehole
fonte
11
@NicholasPickering .. que tal wkhtmltopdf?
codeinthehole
Hum, não tenho certeza. É apenas um pequeno revés. Acabou tendo que usar tabelas para obter o efeito desejado.
Nicholas Pickering
Bem, eu posso recomendar o wkhtmltopdf se você precisar de algo que seja compatível com CSS3.
Codigohehe
7
Enquanto isso, 10 anos depois, esse é definitivamente o caminho a percorrer.
Vog
19

Infelizmente, elementos inline (ou elementos com display: inline) ignoram a propriedade width. Você deve usar divs flutuantes:

<style type="text/css">
div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }
</style>

<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 você precisa usar extensões e listas, por isso precisamos reescrever isso um pouco:

<html><head>
<style type="text/css">
        span.f1 { display: block; float: left; clear: left; width: 60px; }
    li { list-style-type: none; }
    </style>

</head><body>
<ul>
<li><span class="f1">&nbsp;</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>
</body>
</html>
Tamas Czinege
fonte
3
Essa é uma ótima solução. Divs flutuantes imitam o comportamento pretendido dos vãos à medida que se alinham horizontalmente. É importante lembrar o claro: ambas as quebras de linha. É uma ótima maneira de evitar tabelas neste contexto.
Art
Não entendo, o botão é um elemento embutido ou um bloco embutido, por que "width" se aplicará a ele? Button parece um elemento embutido, certo? Existe algum documento mostrando as propriedades "display" padrão de todos os elementos html?
GMsoF 25/04
14

A <span>tag precisará ser definida comodisplay:block como um elemento embutido e ignorará a largura.

tão:

<style type="text/css"> span { width: 50px; display: block; } </style>

e depois:

<li><span>&nbsp;</span>something</li>
<li><span>AND</span>something else</li>
Aaron Powell
fonte
Não, acho que não funciona. "alguma coisa" vai para a próxima linha. E há um "<"
ausente
Como eu disse, não funciona! Confira jsfiddle.net/m156a0qp . Além disso, nunca é bom mexer com o CSS de todos os elementos de amplitude!
user1537366
4 
<style type="text/css">

span {
  position:absolute;
  width: 50px;
}

</style>

Você pode executar este método para atribuir largura a elementos embutidos

Augustus Francis
fonte
2

As pessoas que se estendem nesse caso não podem ser um elemento de bloco porque o restante do texto entre os elementos li ficará inativo. O uso de float também é uma péssima idéia, pois você precisará definir a largura para todo o elemento li e essa largura precisará ser igual à largura do elemento ul inteiro ou de outro contêiner.

Tente algo parecido com isto em html:

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

e no css

li {position:relative;padding-left:80px;} // 80px or something else
li span {position:absolute;top:0;left:0;}
li strong {color:red;} // red or else

portanto, quando o elemento li é relativo, você formata o elemento span como absoluto e no topo: 0; left: 0; portanto, ele fica no canto superior esquerdo e você define o preenchimento para a esquerda (ou: padding: 0px 0px 0px 80px;) para definir esse espaço livre para o elemento de amplitude.

Deve funcionar melhor para casos simples.

Arturro
fonte
1

tente isso 

> <span class="input-group-addon" style="padding-left:6%;
> padding-right:6%; width:150px; overflow: auto;">
Rahmad Saleh
fonte
1

Usando o HTML 5.0, é possível corrigir a largura do bloco de texto usando <span>ou <div>.

insira a descrição da imagem aqui

Para <span>, o importante é adicionar a seguinte linha CCS

display: inline-block;

Para o seu vazio, <span>o importante é adicionar &nbsp;espaço.

Meu código está seguindo

body
	{
	font-family: Arial;
	font-size:20px;
	}

div
	{
	width:200px;
	font-size:80px;
	background-color: lime;
	}
div span
	{
	display:block;
	width:200px;
	background-color: lime;
	}

ul li span
	{
	display: inline-block;
	width: 80px;
	background-color: yellow;
	}
span.tab
	{
	display: inline-block;
	width: 80px;
	background-color: yellow;
	}
&lt;DIV&gt;

<div class='test'>ABCDEF</div>

&lt;SPAN&gt;

<div>
    <span class='test'>ABCDEF</span>
</div

<br>

<ul>
  <li><span class='tab'>&nbsp;</span> The lazy dog.</li>
  <li><span class='tab'>AND</span> The lazy cat.</li>
  <li><span class='tab'>OR</span> The active goldfish.</li>
</ul>
Expandir snippet

PS: Eu defini tabclasse porque o ul li spanseletor CSS não está funcionando no meu PC!

schlebe
fonte
inserindo um & nbsp; foi o que funcionou para mim!
adrien le coarer 03/06
0

Você pode fazer isso usando uma tabela, mas não é um CSS puro.

<style>
ul{
    text-indent: 40px;
}

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

span{
    color: #ff0000;
    position: relative;
    left: -40px;
}
</style>


<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>

Observe que ele não é exibido exatamente como você deseja, porque alterna a linha em cada opção. No entanto, espero que isso ajude você a se aproximar da resposta.

luiscubal
fonte
-1

Bem, sempre há o método da força bruta:

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

Ou é isso que você quis dizer com "preenchimento" do texto? Esse é um trabalho ambíguo nesse contexto.

Isso soa como uma pergunta de lição de casa. Espero que você não esteja tentando nos fazer sua lição de casa para você?

eaolson
fonte
-1 

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>
Expandir snippet

Pepe Unodostres
fonte