Bloco de exibição sem largura de 100%

94

Quero definir um elemento span para aparecer abaixo de outro elemento usando a propriedade display. Tentei aplicar bloco embutido, mas sem sucesso, e descobri que poderia usar bloco se de alguma forma conseguisse evitar dar ao elemento uma largura de 100% (não quero que o elemento "estique"). Isso pode ser feito, ou se não, qual é a boa práxis para resolver esse tipo de problema?

Exemplo: uma lista de notícias onde desejo definir um link "leia mais" no final de cada postagem (nota: em <a>vez de <span>)

<li>
<span class="date">11/15/2012</span>
<span class="title">Lorem ipsum dolor</span>
<a class="read-more">Read more</a> 
</li>

Atualização: resolvido. Em CSS, aplique

li {
    clear: both;
}
li a {
    display: block;
    float: left;
    clear: both;
}

html width block css Staffan Estberg
fonte

1

Você tem alguma marcação (HTML ou CSS) para nos mostrar? É difícil trabalhar no problema sem nada em que realmente trabalhar. Além disso, uma demonstração no jsfiddle seria bom.

Tom Oakley,

Achei que não precisava de nenhum código de amostra, pois se trata apenas de posicionar um elemento span. Veja a postagem atualizada.

Staffan Estberg

Você pode reduzir seriamente toda essa marcação usando apenas uma linha de código, como mencionei abaixo.

ha404

71

Se estou entendendo sua pergunta corretamente, o seguinte CSS irá flutuar seu a abaixo dos spans e evitar que ele tenha uma largura de 100%:

a {
    display: block; 
    float: left; 
    clear: left; 
}

PJ McCormick
fonte

Tentei aplicar isso, mas como os elementos do span (título e data, no exemplo) não têm float, o link é posicionado antes do último período. Acho que uma solução seria fazer todos os elementos filhos no li flutuarem.

Staffan Estberg

Isso funciona se eu aplicar um clearfix para o pai li. Vou com essa solução, obrigado PJ.

Staffan Estberg,

157

Use display: table.

Essa resposta deve ter pelo menos 30 caracteres; Eu digitei 20, então aqui estão mais alguns.

ha404
fonte

13

Solução genial. margin: 0 auto;se você precisar centralizado.

Mafia

4

Eu acho você incrível.

billynoah

1

display: table;funciona, mas não aceita nenhum preenchimento.

donquixote de

@ ha404 você está certo, o enchimento funciona! jsfiddle.net/wgj7xvLe/4 pelo menos no meu navegador (Chromium).

donquixote

3

@donquixote ele deve aceitar preenchimento, desde que você use border-collapse: separe. só tive esse problema.

Brad

30

você pode usar:

width: max-content;

Observação: o suporte é limitado, verifique aqui uma análise completa dos navegadores compatíveis

Mustafa J
fonte

Eu nunca tinha ouvido falar disso! Interessante.

Ryan

Estava bom desde o Chrome 46 e FF 66. Deve ser aceita resposta. inline-blocket al estava quebrando meu layout.

i336_

1

@ i336_ A partir de hoje, ainda não é compatível com o navegador Edge.

ChrisW

Edge ou Chromium Edge? (Para ser claro; o primeiro estará em transição por um bom tempo ...)

i336_

7

Eu manteria cada linha com seu próprio div, então ...

<div class="row">
    <div class="cell">Content</div>
</div>
<div class="row">
    <div class="cell">Content</div>
</div>

E então para o CSS:

.cell{display:inline-block}

É difícil fornecer uma solução sem ver seu código original.

George
fonte

1

Obrigado, mas prefiro não misturar nenhum elemento div.

Staffan Estberg

5

Novamente: uma resposta que pode ser um pouco tarde demais (mas para aqueles que encontram esta página para a resposta de qualquer maneira).

Em vez de display:block;usardisplay:inline-block;

Renske
fonte

2

Experimente isto:

li a {
    width: 0px;
    white-space:nowrap;
}

Roberto
fonte

1

Eu tive esse problema, resolvi assim:

.parent {
  white-space: nowrap;
  display: table;
}

.child {
  display: block;
}

o "white-space: nowrap" garante que os filhos do filho (se houver) não quebrem para uma nova linha se não houver espaço suficiente.

sem "espaço em branco: nowrap":

com "espaço em branco: nowrap":

editar: parece que também funciona sem a parte do bloco filho para mim, então apenas isso parece funcionar bem.

.parent {
  white-space: nowrap;
  display: table;
}

Novato
fonte

0

Você pode usar o seguinte:

display: inline-block;

Funciona bem em links e outros elementos.

Bruno Leveque
fonte

Bloco de exibição sem largura de 100%

Respostas: