Jak mogę wyrównać do lewej numery na uporządkowanej liście?
1. an item
// skip some items for brevity
9. another item
10. notice the 1 is under the 9, and the item contents also line up
Zmienić znak po liczbie w uporządkowanej liście?
1) an itemIstnieje również rozwiązanie CSS umożliwiające zmianę z liczb na listy alfabetyczne / rzymskie zamiast używania atrybutu type w elemencie ol.
Najbardziej interesują mnie odpowiedzi, które działają w przeglądarce Firefox 3.
Odpowiedzi:
To jest rozwiązanie, które pracuję w Firefox 3, Opera i Google Chrome. Lista nadal jest wyświetlana w IE7 (ale bez nawiasu zamykającego i numerów wyrównanych do lewej):
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-bottom: .5em;
margin-left: 2em;
}
li::before {
display: inline-block;
content: counter(item) ") ";
counter-increment: item;
width: 2em;
margin-left: -2em;
}<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine<br>Items</li>
<li>Ten<br>Items</li>
</ol>EDYCJA: Dołączona poprawka wielu linii przez stragera
Istnieje również rozwiązanie CSS umożliwiające zmianę z liczb na listy alfabetyczne / rzymskie zamiast używania atrybutu type w elemencie ol.
Zapoznaj się z właściwością CSS typu listy . Lub w przypadku korzystania z liczników drugi argument akceptuje wartość typu listy. Na przykład następujące będą używać wielkich liter:
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}.
CSS dla list stylów jest tutaj , ale jest w zasadzie:
li {
list-style-type: decimal;
list-style-position: inside;
}
Jednak specyficzny układ jesteś po prawdopodobnie można osiągnąć tylko przez sięgnięcie do wnętrzności układ z czymś takim to (uwaga, że nie zostały faktycznie próbował go):
ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
Możesz również podać własne liczby w HTML - np. Jeśli liczby są dostarczane przez bazę danych:
ol {
list-style: none;
}
ol>li:before {
content: attr(seq) ". ";
}<ol>
<li seq="1">Item one</li>
<li seq="20">Item twenty</li>
<li seq="300">Item three hundred</li>
</ol>seqAtrybut jest widoczne stosując metodę podobną do podanej w innych odpowiedzi. Ale zamiast używać content: counter(foo), używamy content: attr(seq).
value="4A", ponieważ to nie zadziała. Ponadto atrybut wartości może współpracować z typeatrybutem, ale wartość nadal musi być liczbą (ponieważ działa w uporządkowanym zestawie).
reversedatrybut jest html5 tylko, jak przy użyciu valuez li). Zamiast używać twojego seq, ustawiłem valuei użyłem attr(value)zamiastattr(seq)
Ukradłem dużo tego z innych odpowiedzi, ale to działa dla mnie w FF3. Posiada upper-romanjednolite wcięcie, nawias zamykający.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
margin-bottom: .5em;
}
li:before {
display: inline-block;
content: counter(item, upper-roman) ")";
counter-increment: item;
width: 3em;
}
-->
</style>
</head>
<body>
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ol>
</body>
</html>
Proponuję pobawić się atrybutem: before i zobaczyć, co można dzięki temu osiągnąć. Będzie to oznaczać, że Twój kod naprawdę jest ograniczony do nowych, ładnych przeglądarek i wyklucza (irytująco dużą) sekcję rynku, która wciąż używa starych przeglądarek,
Coś podobnego do następującego, które wymusza ustalenie z na przedmiotach. Tak, wiem, że samodzielne wybieranie szerokości jest mniej eleganckie, ale używanie CSS do układu jest jak tajna praca policyjna: bez względu na to, jakie masz motywy, zawsze robi się bałagan.
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
Ale będziesz musiał eksperymentować, aby znaleźć dokładne rozwiązanie.
Liczby układają się lepiej, jeśli dodasz zera wiodące do liczb, ustawiając typ listy na:
ol { list-style-type: decimal-leading-zero; }valueatrybutu (bez CSS)Nowoczesne przeglądarki zinterpretują ten valueatrybut i wyświetlą go zgodnie z oczekiwaniami. Zobacz dokumentację MDN .
<ol>
<li value="3">This is item three.</li>
<li value="50">This is item fifty.</li>
<li value="100">This is item one hundred.</li>
</ol>Zapoznaj się również z <ol>artykułem na temat MDN , zwłaszcza z dokumentacją dotyczącą startatrybutu and.
Pożyczono i poprawiono odpowiedź Marcusa Downinga . Przetestowane i działa w przeglądarkach Firefox 3 i Opera 9. Obsługuje również wiele linii.
ol {
counter-reset: item;
margin-left: 0;
padding-left: 0;
}
li {
display: block;
margin-left: 3.5em; /* Change with margin-left on li:before. Must be -li:before::margin-left + li:before::padding-right. (Causes indention for other lines.) */
}
li:before {
content: counter(item) ")"; /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
counter-increment: item;
display: inline-block;
text-align: right;
width: 3em; /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example). Will have to beef up if using roman. */
padding-right: 0.5em;
margin-left: -3.5em; /* See li comments. */
}
Istnieje atrybut Typ, który umożliwia zmianę stylu numeracji, jednak nie można zmienić kropki po cyfrze / literze.
<ol type="a">
<li>Turn left on Maple Street</li>
<li>Turn right on Clover Court</li>
</ol>Doktorzy mówią odnośnie list-style-position: outside
CSS1 nie określa dokładnej lokalizacji pola znacznika i ze względu na kompatybilność CSS2 pozostaje równie niejednoznaczny. Aby uzyskać bardziej precyzyjną kontrolę nad polami oznaczników, użyj markerów.
Dalej na tej stronie znajduje się materiał o znacznikach.
Jednym z przykładów jest:
LI:before {
display: marker;
content: "(" counter(counter) ")";
counter-increment: counter;
width: 6em;
text-align: center;
}Nie ... po prostu użyj DL:
dl { overflow:hidden; }
dt {
float:left;
clear: left;
width:4em; /* adjust the width; make sure the total of both is 100% */
text-align: right
}
dd {
float:left;
width:50%; /* adjust the width; make sure the total of both is 100% */
margin: 0 0.5em;
}Mam to. Spróbuj wykonać następujące czynności:
<html>
<head>
<style type='text/css'>
ol { counter-reset: item; }
li { display: block; }
li:before { content: counter(item) ")"; counter-increment: item;
display: inline-block; width: 50px; }
</style>
</head>
<body>
<ol>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ol>
</body>Haczyk polega na tym, że to zdecydowanie nie zadziała na starszych lub mniej zgodnych przeglądarkach: display: inline-blockto bardzo nowa właściwość.
Szybkie i brudne rozwiązanie alternatywne. Możesz użyć znaku tabulacji wraz ze wstępnie sformatowanym tekstem. Oto możliwość:
<style type="text/css">
ol {
list-style-position: inside;
}
li:first-letter {
white-space: pre;
}
</style>i twój html:
<ol>
<li> an item</li>
<li> another item</li>
...
</ol>Zwróć uwagę, że odstęp między liznacznikiem a początkiem tekstu jest znakiem tabulacji (co otrzymujesz, naciskając klawisz tabulacji w notatniku).
Jeśli potrzebujesz obsługi starszych przeglądarek, możesz to zrobić:
<style type="text/css">
ol {
list-style-position: inside;
}
</style>
<ol>
<li><pre> </pre>an item</li>
<li><pre> </pre>another item</li>
...
</ol>Pozostałe odpowiedzi są lepsze z koncepcyjnego punktu widzenia. Możesz jednak po prostu uzupełnić liczby w lewo odpowiednią liczbą „& ensp;” aby ustawić je w jednej linii.
* Uwaga: na początku nie rozpoznałem, że używana jest lista numerowana. Myślałem, że lista jest jawnie generowana.
Podam tutaj odpowiedź, której zwykle nie lubię czytać, ale myślę, że skoro istnieją inne odpowiedzi, które mówią, jak osiągnąć to, czego chcesz, dobrze byłoby przemyśleć, czy to, co próbujesz osiągnąć, jest naprawdę dobry pomysł.
Najpierw zastanów się, czy dobrym pomysłem jest pokazanie pozycji w niestandardowy sposób, z innym znakiem separatora niż podany.
Nie znam powodów, ale przypuśćmy, że masz dobre powody.
Proponowane tutaj sposoby osiągnięcia polegające na dodawaniu treści do znaczników, głównie poprzez CSS: przed pseudoklasą. Ta zawartość naprawdę modyfikuje twoją strukturę DOM, dodając do niej te elementy.
Używając standardowej numeracji „ol”, uzyskasz wyrenderowaną zawartość, w której tekst „li” jest wybieralny, ale liczba poprzedzająca go nie jest wybierana. Oznacza to, że standardowy system numeracji wydaje się być bardziej „dekoracją” niż rzeczywistą treścią. Jeśli dodasz zawartość do numerów przy użyciu na przykład tych metod „: before”, zawartość ta będzie możliwa do wybrania i spowodowana tym, że spowoduje to niepożądane błędy kopiowania / wklejania lub problemy z dostępnością z czytnikami ekranu, które dodatkowo odczytują tę „nową” zawartość do standardowego systemu numeracji.
Być może innym podejściem mogłoby być stylizowanie liczb za pomocą obrazów, chociaż ta alternatywa przyniesie własne problemy (liczby nie są wyświetlane, gdy obrazy są wyłączone, rozmiar tekstu dla numeru nie zmienia się, ...).
Tak czy inaczej, powodem tej odpowiedzi nie jest tylko zaproponowanie tej alternatywy dla „obrazków”, ale skłonienie ludzi do myślenia o konsekwencjach próby zmiany standardowego systemu numeracji dla list uporządkowanych.
Ten kod sprawia, że styl numeracji jest taki sam, jak nagłówki zawartości li.
<style>
h4 {font-size: 18px}
ol.list-h4 {counter-reset: item; padding-left:27px}
ol.list-h4 > li {display: block}
ol.list-h4 > li::before {display: block; position:absolute; left:16px; top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
ol.list-h4 > li > h4 {padding-top:3px}
</style>
<ol class="list-h4">
<li>
<h4>...</h4>
<p>...</p>
</li>
<li>...</li>
</ol>