Blocco di visualizzazione senza larghezza del 100%

95

Voglio impostare un elemento span in modo che appaia sotto un altro elemento utilizzando la proprietà display. Ho provato ad applicare il blocco in linea ma senza successo, e ho pensato che avrei potuto usare il blocco se in qualche modo riuscissi a evitare di dare all'elemento una larghezza del 100% (non voglio che l'elemento si "allunghi"). Può essere fatto o, in caso contrario, qual è la buona prassi per risolvere questo tipo di problema?

Esempio: un elenco di notizie in cui desidero impostare un link "leggi altro" alla fine di ogni post (nota: <a>invece di <span>)

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

Aggiornamento: risolto. In CSS, applica

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

— Staffan Estberg
fonte

1

Hai qualche markup (HTML o CSS) da mostrarci? È difficile lavorare sul problema senza nulla su cui lavorare effettivamente. Anche una demo su jsfiddle sarebbe buona.

— Tom Oakley

Pensavo di non aver bisogno di alcun codice di esempio poiché si tratta solo di posizionare un elemento span. Vedi post aggiornato.

— Staffan Estberg

Puoi seriamente ridurre tutto quel markup usando solo una riga di codice come ho menzionato di seguito.

— ha404

73

Se sto comprendendo correttamente la tua domanda, il seguente CSS farà fluttuare il tuo a sotto gli intervalli e gli impedirà di avere una larghezza del 100%:

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

— PJ McCormick
fonte

Ho provato ad applicarlo ma poiché gli elementi span (titolo e data, nell'esempio) non hanno float, il collegamento viene posizionato prima dell'ultimo span. Immagino che una soluzione sarebbe quella di rendere tutti gli elementi figlio nel li float.

— Staffan Estberg

Funziona se applico un clearfix per il genitore. Vado con questa soluzione, grazie PJ.

— Staffan Estberg

157

Usa display: table.

Questa risposta deve contenere almeno 30 caratteri; Ho inserito 20, quindi eccone qualcun altro.

— ha404
fonte

13

Soluzione geniale. margin: 0 auto;se ne hai bisogno centrato.

— Mafia

4

Penso che tu sia fantastico.

— billynoah

1

display: table;funziona, ma non accetta alcun riempimento.

— donquixote

@ ha404 hai ragione, l'imbottitura funziona! jsfiddle.net/wgj7xvLe/4 almeno nel mio browser (Chromium).

— donquixote

3

@donquixote dovrebbe accettare la spaziatura interna fintanto che usi border-collapse: separate. ho appena avuto quel problema.

— Brad

30

Puoi usare:

width: max-content;

Nota: il supporto è limitato, controlla qui per un'analisi completa dei browser supportati

— Mustafa J
fonte

Non ne avevo mai sentito parlare! Interessante.

— Ryan

Era buono da Chrome 46 e FF 66. Dovrebbe essere accettata la risposta. inline-blocket al stavano rompendo il mio layout.

— i336_

1

@ i336_ Ad oggi non è ancora supportato dal browser Edge.

— ChrisW

Edge o Chromium Edge? (Per essere chiari; il primo sarà in fase di transizione per un bel po '...)

— i336_

Secondo caniuse.com è supportato in Edge a partire da Edge 79 rilasciato il 14 gennaio 2020. In totale ha una valutazione di supporto del 92%. caniuse.com/?search=max-content Questo è un bel benvenuto per me. Quando ne ho sentito parlare per la prima volta quasi 2 anni fa, non aveva un supporto abbastanza ampio da poterlo utilizzare in produzione, ma ora sì.

— Xandor,

7

Terrò ogni riga al proprio div, quindi ...

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

E poi per il CSS:

.cell{display:inline-block}

È difficile darti una soluzione senza vedere il tuo codice originale.

— Giorgio
fonte

1

Grazie, ma preferirei non mischiare alcun elemento div.

— Staffan Estberg

5

Ancora: una risposta che potrebbe essere un po 'troppo tardi (ma per chi trova comunque questa pagina per la risposta).

Invece di display:block;usaredisplay:inline-block;

— Renske
fonte

2

Prova questo:

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

— Roberto
fonte

1

Ho avuto questo problema, l'ho risolto in questo modo:

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

.child {
  display: block;
}

lo "spazio bianco: nowrap" fa in modo che i figli del bambino (se ne ha) non vadano a capo su una nuova riga se non c'è abbastanza spazio.

senza "spazio bianco: nowrap":

con "white-space: nowrap":

modifica: sembra che funzioni anche senza la parte del blocco figlio per me, quindi sembra funzionare bene.

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

— Novizio
fonte

0

Puoi usare quanto segue:

display: inline-block;

Funziona bene su link e altri elementi.

— Bruno Leveque
fonte