Domanda

Ho una lista ul che visualizzo come un menu orizzontale. Mi piacerebbe che il contenuto di ogni li di rimanere su una sola riga, ma l'intero voci li a saltare le linee, se necessario. Qualcosa di simile:

First entry in the menu Second menu entry
These words are short, the LI jumps lines, but doesn't wrap
Yet anoter] [And more] [Some more]

A rigor di logica, avevo appena messo li {white-space:nowrap;}, ma c'è un problema con i browser WebKit. I prodotti con nowrap rimane bloccata a elementi adiacenti. Quindi, nel caso di cui sopra, tutte le li sarà sulla stessa linea.

Lo stesso vale per un elemento isolato con nowrap all'interno di un blocco di testo incarto.

<p>Visit my sites <a href="http://gabrielradic.com/" style="white-space:nowrap">Gabriel Radic
.com (English)</a> or <a href="http://www.timbru.com/" style="white-space:nowrap">Timbru Blog
(Romanian)</a>.

Quello che mi aspetto è qualcosa di simile:

Visita il mio sito Gabriel Radic .com o
timbru Blog

Al contrario, i due collegamenti finiscono insieme bloccato, come:

visitare i miei siti
Gabriel Radic .com o timbru Blog (rumeno)

C'è un bel modo per dire a Safari, Chrome e altri di smettere di afferrare i gomiti della gente?

Grazie per l'aiuto.

È stato utile?

Soluzione

Invece di usare white-space:nowrap, in questo caso è più opportuno andare con display:inline-block.

I bisogni CSS di essere lì adattato qui e per il cambiamento, ma funziona come previsto.

Altri suggerimenti

Quindi, se ho capito bene, si desidera che il testo all'interno delle voci di elenco per avvolgere, ma non il menu stesso, giusto? in modo che sembra qualcosa di simile:

item one | item two | item number | item four 
                         three

Ma non ha apparire come:

item one | item two | item number three | 
item four 

Se questo è il caso, hai provato l'impostazione della nowrap sul ul effettiva trascurando le voci di elenco, dal momento che è l'ul che si sta tentando di fare va a capo? Quindi impostare una larghezza per le voci di elenco in modo che possano avvolgere per adattarsi che la larghezza.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top