2009-12-08 9 views
16

Tengo una lista HTML no ordenada (ul). Si la segunda palabra es demasiado larga, la línea se ajusta automáticamente pero el texto desbordado no está sangrado. ¿Alguna idea de cómo resolver eso?li ul li es demasiado larga, la línea se envuelve pero no se indention

Aquí está el ejemplo: http://tinyurl.com/yk32ek6 Entonces "Leistungen" y haga clic en KINDERZAHNHEILKUNDE. Ahora ves lo que quiero decir.

Probablemente sea por el CSS, no lo sé.

+4

La url ejemplo que nos ha proporcionado ya no tiene el problema ... vale la pena usar jsFiddle para demostrar el problema en lugar de un sitio web real que podría cambiar – Teevus

Respuesta

32

reemplazar su guión con el acolchado

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

debe hacer el truco

+0

text-indent ha hecho el truco. Gracias a todos por la ayuda, nickf de esta manera es genial, lo usaré la próxima vez. @sarfraz simplemente cambiando el tamaño no es lo que quiero, todo el diseño se cambiaría por flotación. – rdesign

-2

Esto está sucediendo porque la palabra Prophylaxe in der Schwangerschaft es demasiado larga para caber en esa barra lateral. Necesita aumentar el ancho de la barra lateral que contiene su lista.

La única otra solución es disminuir el tamaño de la fuente de modo que incluso palabras como las anteriores se muestren como el ancho de la barra lateral.

EDITAR Por favor, hágamelo saber si mis respuestas son correctas o no, ya que tienen alguna creencia de que la razón a pesar de que alguien ha -ve me marcó; así que por favor avíseme si me equivoco probándolo. gracias

+0

Creo que la persona probablemente lo rechazó porque insistió en que el diseño necesitaba cambiar lo que quería que su sitio se viera, cuando de hecho había una manera de que él lograra el efecto que deseaba. Votar hacia abajo no es necesariamente un castigo para usted, sino una forma de advertir a los posibles espectadores que la respuesta proporcionada es incorrecta. – Gausie

+0

gracias por su comentario Gausie :) – Sarfraz

13

anadir este CSS:

ul { 
    list-style-position: outside; 
} 

Ejemplo aquí: http://jsbin.com/emeda/

+0

Esto debería leer lista-estilo-posición –

+0

@ Jean-FrançoisBeauchamp gracias, tienes razón. Puedes editarlos tú mismo, sabes. :) – nickf

1

Por mi lista y la ordenada sangría de línea múltiple He seguido a continuación css

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

y luego su html debe ser

<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> 
Cuestiones relacionadas