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

— 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