Druga linia w li zaczyna się pod punktorem po CSS-reset

Question

Mam pewne problemy z moją ul -list po użyciu stosowania CSS-Reset.

Kiedy tekst w li jest długi i łamie się do drugiej linii, tekst zaczyna się pod punktorem. Chciałbym zacząć od tego samego marginesu/dopełnienia, co tekst po prawej stronie kuli.

Coś trudnego do wytłumaczenia, ale jeśli spojrzeć na przykładowy obraz. Lewy obrazek jest dzisiaj listą. "motta varsel [...]" zaczyna się pod kulą, ale chciałbym, żeby wyglądało jak na zdjęciu po prawej.

Jak mogę to zrobić z CSS? Zakładam, że jest coś bardzo prostego, co przeoczyłem, ale nie wiem, co. Wyszukiwania Google również nie zwróciły niczego użytecznego.

Answer 1

Znacznik li ma właściwość o nazwie list-style-position. To sprawia, że ​​twoje pociski wewnątrz lub na zewnątrz listy. Domyślnie jest ustawiony na inside. To sprawia, że ​​otaczasz go tekstem. Jeśli ustawisz go na outside, tekst tagów li zostanie wyrównany.

Wadą tego jest to, że Twoje pociski nie będą wyrównane z tekstem spoza zestawu ul. Jeśli chcesz dopasować go do innego tekstu, możesz użyć marginesu.

ul li { 
    /* 
    * We want the bullets outside of the list, 
    * so the text is aligned. Now the actual bullet 
    * is outside of the list’s container 
    */ 
    list-style-position: outside; 

    /* 
    * Because the bullet is outside of the list’s 
    * container, indent the list entirely 
    */ 
    margin-left: 1em; 
} 

---

Edycja 15 marca 2014 r Widząc ludzie wciąż napływają z Google, czułem się jak w oryginalnym odpowiedź może wykorzystać pewną poprawę

• zmienił bloku kodu, aby zapewnić Po prostu rozwiązanie
• Zmieniono jednostkę wcięć na em 's
• Każda nieruchomość jest stosowane do elementu ul
• dobre komentarze :)

Answer 2

Oto dobry example -

ul li{ 
    list-style-type: disc; 
    list-style-position: inside; 
    padding: 10px 0 10px 20px; 
    text-indent: -1em; 
} 

Demo roboczej: http://jsfiddle.net/d9VNk/

Answer 3

I druga odpowiedź Dipaks', ale często po prostu text-indent wystarczy jak możesz/maynot być pozycjonowanie ul lepszego układu kontrola.

ul li{ 
text-indent: -1em; 
}