2009-12-08 6 views
16

Ho un elenco HTML non ordinato (ul). Se la seconda parola è troppo lunga, la linea si avvolge automaticamente ma il testo che trabocca non è rientrato. Qualche idea su come risolverlo?li ul li è troppo lungo, line wraps ma nessuna indentazione

Ecco l'esempio: http://tinyurl.com/yk32ek6 Quindi "Leistungen", quindi fare clic su KINDERZAHNHEILKUNDE. Ora capisci cosa intendo.

Probabilmente è a causa del css, non lo so.

+4

L'esempio url da Lei forniti non ha più il problema ... il suo valore utilizzando jsfiddle per dimostrare il problema invece di un sito web vero e proprio, che potrebbe cambiare – Teevus

risposta

32

Sostituisci il tuo trattino con imbottitura

padding-left: 2em; 
text-indent: -2em; 

dovrebbe fare il trucco

+0

text-indent ha fatto il trucco. Grazie a tutti per l'aiuto, nickf in questo modo è fantastico, lo userò la prossima volta. @sarfraz solo cambiando la dimensione non è quello che voglio, l'intero layout sarebbe cambiato attraverso il floating. – rdesign

-2

Questo accade perché la parola Profilassi in der Schwangerschaft è troppo lunga per adattarsi a quella barra laterale. È necessario aumentare la larghezza della barra laterale contenente l'elenco.

L'unica altra soluzione è ridurre la dimensione del carattere in modo che anche le parole come sopra siano visualizzate come per larghezza della barra laterale.

EDIT Per favore fatemi sapere se le mie risposte sono corrette o meno come ho qualche convinzione di quel motivo anche se qualcuno mi ha segnato; quindi per favore fatemi sapere se ho torto provandolo. grazie

+0

Penso che probabilmente la persona ti abbia votato perché hai insistito sul fatto che il design aveva bisogno di cambiare ciò che voleva che fosse il suo sito, quando c'era un modo per lui di ottenere l'effetto che desiderava. La votazione non è necessariamente una punizione per te, piuttosto un modo per avvertire i potenziali spettatori che la risposta fornita non è corretta. – Gausie

+0

grazie per il tuo commento Gausie :) – Sarfraz

13

aggiungere questo CSS:

ul { 
    list-style-position: outside; 
} 

Esempio qui: http://jsbin.com/emeda/

+0

Questo dovrebbe leggere la posizione stile elenco –

+0

@ Jean-FrançoisBeauchamp grazie, hai ragione. Puoi modificarli da solo, lo sai. :) – nickf

1

Per la mia lista ordinata e la indentazione multi linea che ho seguito sotto css

.surveyorderedlist{ 
     ol{ 
      list-style-position: outside; 
     } 
     li{ 
      margin-bottom:5px; 
      margin-left:40px; 
      padding-left:8px; 
     } 
    } 

e poi il tuo html dovrebbe essere

<div class="surveyorderedlist"> 
      <span><b>Conditions imposed</b></span> 
      <ol> 
       <li>Names and addresses are accessed only by the Financial Service Provider on its own behalf, and solely for its own use;</li> 
       <li>Names and addresses may only be accessed for a specified purpose;</li> 
       <li>The fees charged for the provision of the names and addresses from the Motor Vehicle Register (MVR) are duly paid;</li> 
       <li>Any instances of unauthorised access must immediately be notified to the Secretary for Transport and the Privacy Commissioner; </li> 
      </ol> 
</div>