Jak zachować wcięcie dla drugiej linii na uporządkowanych listach za pomocą CSS?

260

Chcę mieć „wewnętrzną” listę z wypunktowaniami lub liczbami dziesiętnymi, które są równo z najlepszymi blokami tekstu. Drugie wiersze wpisów listy muszą mieć takie samo wcięcie jak pierwszy wiersz!

Na przykład:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec quam felis,

1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
   second line of longer Text
4. Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor.

CSS podaje tylko dwie wartości dla swojej „pozycji w stylu listy” - wewnątrz i na zewnątrz. Z „wewnątrz” drugie linie są wyrównane z punktami listy, a nie z linią wyższą:

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text

Szerokość „poza” moją listą nie pokrywa się już z lepszymi blokami tekstu.

Eksperymentuje z wcięciem szerokości, wcięciem w lewo i marginesem w lewo dla list nieuporządkowanych, ale zawodzą w przypadku list uporządkowanych, ponieważ zależy to od liczby znaków dziesiętnych:

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 Aenean commodo ligula eget dolor. 

 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
    second line of longer Text
 4. Text
11. Text
12. Text

„11.” i „12.” nie pokrywają się z nadrzędnym blokiem tekstowym w porównaniu do „3” i „4.”.

Więc gdzie jest sekret dotyczący uporządkowanych list i tiret drugiego wiersza? Dzięki za twój wysiłek!

html css html-lists kernfrucht
źródło

1

Użytkownik Pali Madra dodał to jako odpowiedź, ale został usunięty, ponieważ nie zawiera dalszych wyjaśnień. Powiedział, że jsfiddle może być tym, czego szukasz: jsfiddle.net/palimadra/CZuXY/1

bfavaretto

Spróbuj ustawić tylko padding-left ...

matzone

3

Na wypadek, gdyby ktoś natknął się na to pytanie, kto szuka tylko „podstawowego wcięcia listy”, spójrz na to pytanie ( stackoverflow.com/questions/17556496/... ) i odpowiedź Natashy Banegas.

SunnyRed

Żadna odpowiedź nie odpowiada na pytanie. Rzeczywiste pytanie dotyczy tego, jak wyrównać do lewej cyfry na liście, a jednocześnie wyrównać do lewej tekst elementu listy z tekstem nad nim, gdy tekst ten przepełni się do drugiego lub następnego wiersza. Domyślnie - i prawie w każdej odpowiedzi - cyfry listy są wyrównane do prawej, a tekst elementów listy jest wyrównany do lewej.

Jessie Westlake,

267

Aktualizacja

Ta odpowiedź jest nieaktualna. Możesz to zrobić o wiele prościej, jak wskazano w innej odpowiedzi poniżej:

ul {
  list-style-position: outside;
}

Zobacz https://www.w3schools.com/cssref/pr_list-style-position.asp

Oryginalna odpowiedź

Jestem zaskoczony, widząc, że to jeszcze nie zostało rozwiązane. Możesz skorzystać z algorytmu układu tabeli w przeglądarce (bez użycia tabel) w następujący sposób:

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

Demo: http://jsfiddle.net/4rnNK/1/

wprowadź opis zdjęcia tutaj

Aby działał w IE8, użyj :beforezapisu starszego typu z jednym dwukropkiem.

użytkownik123444555621
źródło

2

@Perelli footylko dowolny łańcuch znaków (ID), służy do łączenia counter-reset, counter-incrementi counter()właściwości.

user123444555621,

3

Możesz także uniknąć zwariowanych rzeczy przy stole, używając position: relativena <li>i position: absolutena generowanej treści. Zobacz jsfiddle.net/maryisdead/kgr4k dla przykładu.

maryisdead

2

@maryisdead Dlaczego 40px? To się zepsuje, gdy liczniki będą szersze . Istotą korzystania z układu tabeli jest to, że przeglądarka automatycznie dopasuje zawartość.

user123444555621

5

Fajnie, ale jak kontrolujesz <li> dolny margines? Wysokość <li> zależy wyłącznie od wysokości zawartych w niej elementów komórki tabeli. Zatem margines, wypełnienie i wysokość tych elementów nie mają wpływu. Jak obejść to ograniczenie?

hschmieder

3

Jeśli masz elementy listy z wieloma wierszami i potrzebujesz spójnego odstępu w pionie, rozwiązaniem jest dodanie pionowego odstępu między ramkami do selektora ol, np. Odstępów między krawędziami: 0 3px; Normalne wypełnienie komórki tabeli nie działa, ponieważ liczba jest zawsze tylko jedną linią.

RemBem,

207

Wierzę, że zrobi to, czego szukasz.

.cssClass li {
    list-style-type: disc;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em;
}

JSFiddle: https://jsfiddle.net/dzbos70f/

JTOrlando
źródło

21

lepiej, jeśli dodasz również padding-left: 1em;

Bence Gacsályi

16

To zdecydowanie najlepsza odpowiedź ze wszystkich rozwiązań na tej stronie. Jest o wiele wygodniejszy niż inne. Jeśli wahasz się z odpowiedzią na wybór, wybierz tę.

Valentin Mercier

25

@loremmonkey To jest szybkie i brudne, ale nie jest prawdziwym rozwiązaniem. Po pierwsze, 1emnie równa się przestrzeni wcięcia. Linie nie będą idealnie wyrównywane pikselowo. Po drugie, a kiedy lista osiągnie liczbę 10? 100? Wcięcie tekstu nie będzie działać, nie zostanie wyrównane. Ta odpowiedź powinna zostać odrzucona.

Słoneczny

1

@Sunny To lista płyt nie jest numerowana, więc po co liczyć na 100? Nie widzę żadnych problemów z listami korzystającymi z powyższego kodu.

lorem monkey

2

@loremmonkey Nie ma wcięcia 1em. oi60.tinypic.com/a0eyvs.jpg Pierwszy element listy używa powyższej techniki wcięcia tekstu. W porównaniu z tym, jak zwykle wygląda z pozycją stylu listy: na zewnątrz jest źle wyrównany, w tym przypadku wyłączony o piksel.

Słoneczny

39

Najłatwiejszym i najczystszym sposobem, bez żadnych włamań, jest po prostu wcięcie ul(lub ol):

ol {
  padding-left: 40px; // Or whatever padding your font size needs
  list-style-position: outside; // OPTIONAL: Only necessary if you've set it to "inside" elsewhere
}

Daje to taki sam wynik jak zaakceptowana odpowiedź: https://jsfiddle.net/5wxf2ayu/

Zrzut ekranu:

Chuck Le Butt
źródło

1

Być może trzeba zastosować list-style-position: outsidedo <li>.

Alex

@Alex Powinieneś to zrobić tylko wtedy, gdy wymuszasz zastąpienie istniejącego stylu ( developer.mozilla.org/en/docs/Web/CSS/list-style-position ).

Chuck Le Butt

25

Sprawdź to skrzypce:

http://jsfiddle.net/K6bLp/

Pokazuje, jak ręcznie wciąć ul i ol za pomocą CSS.

HTML

<head>
    <title>Lines</title>
</head>

<body>
    <ol type="1" style="list-style-position:inside;">
        <li>Text</li>
        <li>Text</li>
        <li >longer Text, longer Text, longer Text, longer Text    second line of longer Text        </li>
    </ol>  
    <br/>
    <ul>
        <li>Text</li>
        <li>Text</li>
        <li>longer Text, longer Text, longer Text, longer Text    second line of longer Text                </li>
    </ul>
</body>

CSS

ol 
{
    margin:0px;
    padding-left:15px;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -1em;
    margin-left: 1em;
}

ul
{
    margin:0;
    padding-left:30px;
}

ul li 
{
    margin: 0px;
    padding: 0px;
    text-indent: 0.5em;
    margin-left: -0.5em;
}

Zredagowałem również twoje skrzypce

http://jsfiddle.net/j7MEd/3/

Zanotuj to.

Deepan Babu
źródło

dziękuję, działa świetnie dla UL i dla OL do 9 pozycji na liście. To jest główny problem, który opisałem w mojej szerokości pytania 11/12. W powyższym przykładzie używam innej techniki, więc problem wygląda inaczej, ale jego rdzeń pozostaje ten sam: istnieje różnica, jeśli mój punkt dziesiętny zawiera jedną lub dwie lub więcej liczb - np. 1., 11. lub 111.! Nie widzę sensu, w którym mogę reagować za pomocą CSS i dopasowywać wcięcie tekstu i margines po lewej stronie do liczby cyfr.

kernfrucht

W przypadku wcięcia drugiego wiersza ol (więcej niż cyfra) myślę, że CSS go nie rozwiąże. Powinniśmy iść tylko na jquery.

Deepan Babu

Zauważ też, że typeatrybut for <ol>wydaje się być nieaktualny w HTML 5. Użyj style="list-style-type: "zamiast tego.

AJ.

2

czy 21 z was w ogóle myśli poważnie? to nie działa. Nie jestem pewien, czy zmieniłeś kod od czasu opublikowania.

JGallardo

9

Można ustawić margines i padding OSOBĄ ollub ulw CSS

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}

luke2012
źródło

niestety problem nie został rozwiązany przez to rozwiązanie: drugie wiersze są wyrównane z listą punktów, a nie szerokością wyższego rzędu, patrz przykład powyżej

kernfrucht

11 i 12 w jsfiddle.net/j7MEd/1 zrównują się z górnymi i dolnymi akapitami i nie zmieniłem kodu. Czy coś brakuje?

luke2012

nie, nie o to chodzi. Głównym problemem jest to, że druga (i trzecia itd.) Linia każdego punktu listy nie ma tego samego „wcięcia” jak pierwsza linia! (patrz przykład jsfiddle). W powyższym pytaniu myślę o obejściu z wypełnieniem, marginesem itp., Ale działa tylko w przypadku list nieuporządkowanych. Na uporządkowanej liście pojawiają się nowe problemy, takie jak ta 11/12. Więc moje główne pytanie brzmi: w jaki sposób mogę wykonać wcięcie (tak jak przedstawiam w moim pierwszym przykładzie pytania) dla uporządkowanych list bez problemów takich jak 11/12.

kernfrucht

Ok przepraszam mam cię! Jest to jeden sposób ... Jedynym problemem jest uzyskanie przeglądarki, która wymaga ustawienia marginesu w IE i dopełnienia w Firefoksie. jsfiddle.net/j7MEd/2

luke2012

7

Uważam, że wystarczy umieścić listę „pocisk” poza obiciem.

li {
    list-style-position: outside;
    padding-left: 1em;
}

Znany kolor
źródło

6

Możesz użyć CSS, aby wybrać zakres; w takim przypadku chcesz wyświetlić elementy 1-9:

ol li:nth-child(n+1):nth-child(-n+9)

Następnie odpowiednio dostosuj marże na tych pierwszych elementach:

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }

Zobacz to w akcji tutaj: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

LaFaucon
źródło

5

Następujący CSS załatwił sprawę:

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}

itoctopus
źródło

4

moje rozwiązanie jest całkiem takie same jak Pumbaa80 jednego „s, ale proponuję używać display: tablezamiast display:table-rowdo lielementu. Będzie to mniej więcej tak:

ol {
    counter-reset: foo; /* default display:list-item */
}

ol > li {
    counter-increment: foo;
    display: table; /* instead of table-row */
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell;
    text-align: right;
}

Więc teraz możemy użyć marże dla odstępów między li„s

Alex
źródło

1

Sam bardzo lubię to rozwiązanie:

ul {
    list-style-position: inside;
    list-style-type: disc;
    font-size: 12px;
    line-height: 1.4em;
    padding: 0 1em;
}

ul li {
    margin: 0 0 0 1em;
    padding: 0 0 0 1em;
    text-indent: -2em;
}

Corey Ballou
źródło

Jedyny problem z rozmiarem czcionki

atilkan

0

Listy ol, ul będą działać, jeśli chcesz, możesz także użyć tabeli z ramką: brak w css.

Casualbot
źródło

myślę, że nie jest to dobre rozwiązanie dotyczące reguł semantycznych

kernfrucht,

0

CSS podaje tylko dwie wartości dla swojej „pozycji w stylu listy” - wewnątrz i na zewnątrz. Z „wewnątrz” drugie linie są wyrównane z punktami listy, a nie z linią wyższą:

Na uporządkowanych listach, bez interwencji, jeśli podasz „list-style-position” wartość „inside”, drugi wiersz długiej pozycji listy nie będzie miał wcięcia, ale wróci do lewej krawędzi listy (tj. będzie wyrównany do lewej względem numeru elementu). Jest to charakterystyczne dla list uporządkowanych i nie występuje na listach nieuporządkowanych.

Jeśli zamiast tego podasz „list-style-position” wartość „outside”, drugi wiersz będzie miał takie samo wcięcie jak pierwszy wiersz.

Miałem listę z ramką i miałem ten problem. Po ustawieniu „list-style-position” na „inside”, moja lista nie wyglądała tak, jakbym tego chciał. Ale z „pozycją stylu listy” ustawioną na „poza”, liczby elementów listy wypadały poza polem.

Rozwiązałem ten problem, po prostu ustawiając szerszy lewy margines dla całej listy, co pchnęło całą listę w prawo, z powrotem do pozycji, w której była wcześniej.

CSS:

ol.classname {margin: 0; padding: 0;}

ol.classname li {margin: 0.5em 0 0 0; padding-left: 0; list-style-position: outside;}

HTML:

<ol class="classname" style="margin:0 0 0 1.5em;">

Chris
źródło

-1

Ok, wróciłem i wymyśliłem kilka rzeczy. Jest to DOKŁADNE ROZWIĄZANIE do tego, co zaproponowałem, ale wydaje się funkcjonalne.

Najpierw stworzyłem liczby jako serię nieuporządkowanych list. Lista nieuporządkowana zwykle zawiera dysk na początku każdego elementu listy (

), więc musisz ustawić CSS na styl listy: none;

Następnie pokazałem całą listę: wiersz tabeli. Dlaczego nie wkleję ci kodu zamiast o nim gadać?

<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Result</title>
</head>
<body>
    <div><ul>
        <li>1.</li>
        <li><p>2.</p></li>
        <li>10.</li>
        <li><p>110.</p></li>
        <li>1000.</li>
    </ul>
    </div>
    <div>
        <p>Some author</p>
        <p>Another author</p>
        <p>Author #10</p>
        <p>Author #110</p>
        <p>The one thousandth author today will win a free i-Pod!!!! This line also wraps around so that we can see how hanging indents look.</p>
        </div>
</body>
</html>'

CSS:

ul li{
list-style: none;
display: table-row;
text-align: right;

}

div {
float: left;
display: inline-block;
margin: 0.2em;

}

Wydaje się, że wyrównuje tekst w drugim dziale z liczbami na liście uporządkowanej w pierwszym dziale. Otoczyłem zarówno listę, jak i tekst znacznikiem, dzięki czemu mogę po prostu powiedzieć wszystkim divom, aby wyświetlały się jako bloki wbudowane. To ładnie je ustawiło.

Margines służy do wstawienia spacji między kropką a początkiem tekstu. W przeciwnym razie biegną naprzeciw siebie i wygląda to jak odleżyna.

Mój pracodawca chciał, aby zawinięty tekst (w przypadku dłuższych wpisów bibliograficznych) był zgodny z początkiem pierwszego wiersza, a nie z lewym marginesem. Początkowo wierciłem się z dodatnim marginesem i negatywnym wcięciem tekstu, ale potem zdałem sobie sprawę, że kiedy przełączyłem się na dwa różne div, to spowodowało, że tekst był wyrównany, ponieważ lewy margines div był margines, w którym tekst naturalnie się zaczynał. Tak więc wszystko, czego potrzebowałem, to margines 0,2em, aby dodać trochę miejsca, a wszystko inne ustawiało się płynnie.

Mam nadzieję, że to pomoże, jeśli OP miał podobny problem ... Trudno mi było go zrozumieć.

David
źródło

-1

Miałem ten sam problem i zacząłem używać odpowiedzi user123444555621 . Jednak musiałem również dodać paddingi borderdo każdego li, co to rozwiązanie nie pozwala, ponieważ każdy lijest table-row.

Najpierw używamy a counterdo odtworzenia olliczb.

Następnie ustawić display: table;na każdym lii display: table-cellna :beforedać nam wcięcia.

Wreszcie trudna część. Ponieważ nie używamy układu tabeli do całości ol, musimy upewnić się, że każdy :beforema taką samą szerokość. Możemy użyć chjednostki, aby z grubsza utrzymać szerokość równą liczbie znaków. Aby zachować jednolite szerokości, gdy liczba cyfr dla :beforeróżnych jest różna, możemy zaimplementować zapytania ilościowe . Zakładając, że wiesz, że twoje listy nie będą zawierały 100 elementów lub więcej, potrzebujesz tylko jednej reguły zapytania ilościowego, aby nakazać :beforezmianę jej szerokości, ale możesz łatwo dodać więcej.

ol {
  counter-reset: ol-num;
  margin: 0;
  padding: 0;
}

ol li {
  counter-increment: ol-num;
  display: table;
  padding: 0.2em 0.4em;
  border-bottom: solid 1px gray;
}

ol li:before {
  content: counter(ol-num) ".";
  display: table-cell;
  width: 2ch; /* approximately two characters wide */
  padding-right: 0.4em;
  text-align: right;
}

/* two digits */
ol li:nth-last-child(n+10):before,
ol li:nth-last-child(n+10) ~ li:before {
  width: 3ch;
}

/* three digits */
ol li:nth-last-child(n+100):before,
ol li:nth-last-child(n+100) ~ li:before {
  width: 4ch;
}

<ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
</ol>

Rozwiń fragment kodu

Jacob Alvarez
źródło

Jak zachować wcięcie dla drugiej linii na uporządkowanych listach za pomocą CSS?

Odpowiedzi:

Aktualizacja

Oryginalna odpowiedź