Blocco di visualizzazione senza larghezza 100%

Desidero impostare un elemento span da visualizzare sotto un altro elemento utilizzando la proprietà display. Ho provato ad applicare inline-block ma senza successo, e ho pensato di poter usare block se in qualche modo riuscissi a evitare di dare all'elemento una larghezza del 100% (non voglio che l'elemento si "allunghi"). Questo può essere fatto, o se no, quali sono le buone prassi per risolvere questo tipo di problema?Blocco di visualizzazione senza larghezza 100%

Esempio: un elenco di notizie dove voglio impostare un "leggi tutto" link 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, applicare

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

fonte

2012-10-03 Staffan Estberg

Hai qualche markup (HTML o CSS) per mostrare a noi? È difficile lavorare sul problema senza nulla su cui lavorare davvero. Anche una demo su [jsfiddle] (http://jsfiddle.net) sarebbe buona. –

Pensavo che non avessi bisogno di codice di esempio poiché si trattava solo di posizionare un elemento span. Vedi post aggiornato. –

Si può seriamente ridurre tutto quel markup semplicemente usando solo una riga di codice come ho detto di seguito. – ha404

Se io sto capendo la tua domanda correttamente, il seguente CSS galleggerà vostro un sotto le campate e tenerlo da avere una larghezza di 100%:

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

fonte

2012-10-03 12:57:25

Ho provato ad applicarlo ma dal momento che gli elementi span (titolo e data, nell'esempio) non hanno il float il link viene posizionato prima dell'ultima span. Indovina una soluzione sarebbe quella di rendere tutti gli elementi figlio nel li float. –

Funziona se applico un clearfix per il genitore li. Andrà con questa soluzione, grazie PJ. –

Nessun problema, felice di aiutare! –

vorrei mantenere 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}

E 'difficile per darvi una soluzione senza vedere il tuo codice originale.

fonte

2012-10-03 12:29:10 George

Grazie, ma preferirei non mischiare alcun elemento div. –

Bella soluzione! Dovrei avere altri upvotes ... – Levit

Non puoi semplicemente impostare l'intervallo di display: block e impostare un width sull'elemento li contenente?

fonte

2012-10-03 13:11:07

Il li deve avere larghezza automatica a causa del titolo e delle date. –

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

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

fonte

2013-11-01 06:30:06 Renske

Prova questo:

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

fonte

2014-05-27 15:46:27 Roberto

100

Usa display: table.

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

fonte

2014-10-15 17:47:40 ha404

funziona bene grazie alla soluzione Genius –

. 'margine: 0 auto;' se ne hai bisogno centrato. – Mafia

Penso che tu sia fantastico. – billynoah

è possibile utilizzare:

width: max-content;

Nota: il supporto è limitato, check here per una ripartizione completa dei browser che supportano

fonte

2017-09-13 13:46:00

Blocco di visualizzazione senza larghezza 100%

risposta

Problemi correlati