Jak zachować wcięcie dla drugiej linii w uporządkowanych listach za pomocą CSS?
Chcę mieć listę" wewnątrz " z punktorami listy lub liczbami dziesiętnymi będącymi równymi z nadrzędnymi blokami tekstu. Drugie wiersze wpisów listy muszą mieć takie samo wcięcie jak pierwszy wiersz!
E. g.:
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ą równe z punktami listy, a nie z linią nadrzędną:
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text
Width "Na Zewnątrz" Moja lista nie jest równo z wyższymi blokami tekstu już nie.
Eksperymenty width text-indent, padding-left I margin-left działają dla list nieuporządkowanych, ale nie działają dla list uporządkowanych, ponieważ zależy to od liczby znaków dziesiętnych listy:
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 są równe z górnym blokiem tekstu w porównaniu do" 3."i" 4.".
Więc gdzie jest sekret o uporządkowanych listach i tiret drugiej linii? Dziękujemy za wysiłek!
14 answers
Update
Ta odpowiedź jest nieaktualna. Można to zrobić o wiele prościej, jak wskazano Dziwię się, że to jeszcze nie zostało rozwiązane. Możesz użyć algorytmu układu tabeli przeglądarki (bez użycia tabel) w następujący sposób:
ul {
list-style-position: outside;
}
Zobacz https://www.w3schools.com/cssref/pr_list-style-position.asp
Oryginalna Odpowiedź
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/
Aby to działało w IE8, użyj legacy :before zapis z jednym dwukropkiem.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-21 00:11:58
Wierzę, że to 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/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-07-06 09:54:17
Najprostszym i najczystszym sposobem, bez żadnych hacków, jest po prostu wciąć ul (lub ol), Jak tak:
ol {
padding-left: 40px;
list-style-position: outside;
}
Daje to taki sam wynik jak przyjęta ODPOWIEDŹ: https://jsfiddle.net/af2fqryz/
Zrzut ekranu:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-19 11:14:06
Sprawdź to:
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;
}
Również edytowałem Twoje skrzypce
Zanotuj to.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-03 14:03:48
Możesz ustawić margines i wypełnienie ol lub ul w CSS
ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-05-03 13:13:49
Myślę, że trzeba tylko umieścić listę 'kula' poza wyściółką.
li {
list-style-position: outside;
padding-left: 1em;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-24 23:23:31
Możesz użyć CSS, aby wybrać zakres; w tym przypadku chcesz, aby pozycje listy 1-9:
ol li:nth-child(n+1):nth-child(-n+9)
Następnie odpowiednio dostosuj marginesy na pierwszych pozycjach:
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 go w akcji tutaj: http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-30 14:34:27
Moje rozwiązanie jest takie samo jak Pumbaa80 , ale proponuję użyć display: table zamiast display:table-row dla li elementu.
Więc będzie to coś takiego:
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żywać marginesów dla odstępów między li ' s
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 11:47:24
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-20 10:35:05
Następujący CSS zrobił sztuczkę:
ul{
margin-left: 1em;
}
li{
list-style-position: outside;
padding-left: 0.5em;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-17 19:48:15
Listy ol, ul będą działać, jeśli chcesz, możesz również użyć tabeli z border: none w css.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-06 20:04:25
Ok, wróciłem i rozgryzłem pewne rzeczy. To jest szorstkie rozwiązanie tego, co proponowałem, ale wydaje się być funkcjonalne.
Po pierwsze, zrobiłem z liczb serię nieuporządkowanych list. Lista nieuporządkowana zwykle ma dysk na początku każdego elementu listy (
Następnie zrobiłem Wyświetlanie całej listy: table-row. Może po prostu wkleję Ci kod zamiast gadać o to?
<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;
}
To wydaje się wyrównywać tekst w drugim div z numerami na liście uporządkowanej w pierwszym div. Otoczyłem zarówno listę, jak i tekst tagiem, dzięki czemu mogę po prostu powiedzieć wszystkim div, aby wyświetlały się jako bloki wbudowane. To ładnie je ustawiło.
Margines służy do umieszczania spacji między kropką a początkiem tekstu. W przeciwnym razie, biegną prosto na siebie i wygląda to jak eyesore.
Mój pracodawca chciał, aby tekst owinięty wokół (dla dłuższych pozycji bibliograficznych)ustawiał się na początku pierwszej linii, a nie na lewym marginesie. Początkowo wierciłem się dodatnim marginesem i ujemnym wcięciem tekstu, ale potem zdałem sobie sprawę, że kiedy przełączyłem się na dwa różne div, miało to wpływ na to, że tekst był ustawiony w kolejce, ponieważ lewy margines div był marginesem, na którym tekst naturalnie się zaczynał. Tak więc wszystko, czego potrzebowałem, to marża 0.2 em, aby dodać trochę przestrzeni i wszystko inne ułożone płynnie.
Mam nadzieję, że to pomoże, jeśli OP miał podobny problem...Ciężko mi było go zrozumieć.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-15 19:35:17
CSS dostarcza tylko dwóch wartości dla swojej "pozycji w stylu listy"-wewnątrz i na zewnątrz. Z "wewnątrz" drugie linie są równo z punktami listy, a nie z linią nadrzędną:
W uporządkowanych listach, bez interwencji, jeśli podasz" list-style-position "wartość " inside", druga linia długiego elementu listy nie będzie miała wcięć, ale powróci do lewej krawędzi listy (tzn. będzie wyrównana do lewej z numerem elementu). Jest to charakterystyczne dla list porządkowych i nie występują na listach nieuporządkowanych.
Jeśli zamiast tego podasz "list-style-position "wartość " outside", druga linia będzie miała takie samo wcięcie jak pierwsza linia.
Miałem listę z obramowaniem i miałem ten problem. Z "list-style-position" ustawionym na "inside", Moja lista nie wyglądała tak, jakbym tego chciał. Ale z "list-style-position" ustawionym na "outside", numery pozycji listy wypadły poza pole.
Rozwiązałem to po prostu ustawiając szerszy lewy margines dla całej listy, który zepchnął całą listę w prawo, z powrotem na pozycję, w której była wcześniej.
CSS:
Ol.classname {margin:0;padding:0;}
Ol.Klasa li {margin:0.5 em 0 0 0;padding-left:0;list-style-position: outside;}
HTML:
<ol class="classname" style="margin:0 0 0 1.5em;">
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-11-25 17:24:32
Miałem ten sam problem i zacząłem używać odpowiedzi user123444555621 . Jednak musiałem również dodać padding i border do każdego li, Na Co To rozwiązanie nie pozwala, ponieważ każdy li jest table-row.
Najpierw używamy counter do replikowania liczb ol.
Następnie ustawiamy display: table; na każdym li i display: table-cell na :before, aby dać nam wcięcie.
Wreszcie, trudna część. Ponieważ nie używamy układu tabeli dla całej ol, musimy zapewnić każda :before ma tę samą szerokość. Możemy użyć ch Jednostka , aby z grubsza zachować szerokość równą liczbie znaków. W celu utrzymania jednolitych szerokości, gdy liczba cyfr dla :before's różnią się, możemy zaimplementować quantity queries. Zakładając, że wiesz, że Twoje listy nie będą zawierać 100 lub więcej pozycji, potrzebujesz tylko jednej reguły zapytania ilościowego, aby powiedzieć :before, aby zmienić jej szerokość, 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>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:03:05