Domyślny typ listy z małą alfabetem dla listy uporządkowanej używa kropki „.”. Czy jest sposób na użycie prawego nawiasu zamiast a) ... b) ..etc?
Domyślny typ listy z małą alfabetem dla listy uporządkowanej używa kropki „.”. Czy jest sposób na użycie prawego nawiasu zamiast a) ... b) ..etc?
Odpowiedzi:
Oto zgrabne rozwiązanie. (Szczerze mówiąc, sam siebie tym zaskoczyłem.) CSS ma coś, co nazywa się licznikami , gdzie możesz na przykład ustawić automatyczne numery rozdziałów w każdym nagłówku. Trochę modyfikacji daje poniższe; Musisz samodzielnie uporządkować wypełnienie itp.
ol {
counter-reset: list;
}
ol > li {
list-style: none;
}
ol > li:before {
content: counter(list, lower-alpha) ") ";
counter-increment: list;
}<span>custom list style type (v1):</span>
<ol>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
<li>Number 6</li>
</ol>Działa we wszystkich nowoczesnych przeglądarkach i IE9 + (i prawdopodobnie IE8, ale może zawierać błędy).
Aktualizacja: dodałem selektor potomny, aby zapobiec pobieraniu przez zagnieżdżone listy stylu rodzica. Trejder również podkreśla w komentarzach, że wyrównanie elementów listy również jest pomieszane. Artykuł na 456bereastreet ma dobre rozwiązanie, które polega na całkowicie ustawienie licznika.
ol {
counter-reset: list;
}
ol > li {
list-style: none;
position: relative;
}
ol > li:before {
counter-increment: list;
content: counter(list, lower-alpha) ") ";
position: absolute;
left: -1.4em;
}<span>custom list style type (v2):</span>
<ol>
<li>Number 1</li>
<li>Number 2</li>
<li>Number 3</li>
<li>Number 4</li>
<li>Number 5</li>
<li>Number 6</li>
</ol>Oto jsFiddle pokazujący wynik, w tym listy zagnieżdżone.
, lower-alpha. Tak więc contentwartość byłabycounter(list) ") ";
opierając się na odpowiedzi DisgruntledGoat, rozszerzyłem ją, aby obsługiwać podlistę i style, zgodnie z potrzebami. Udostępnianie go tutaj na wypadek, gdyby to komuś pomogło.
https://jsfiddle.net/0a8992b9/ wyjścia:
(i)first roman
(a)first alpha
(b)second alpha
(c)third alpha
(d)fourth alpha
(ii)second roman
(iii)third roman
(a)first alpha
(b)second alpha
text-indentna lipoziomie
Dodanie tego do CSS dało interesujące rezultaty. Było blisko, ale nie było cygara.
li:before {
display: inline-block;
width: 1em;
position: relative;
left: -0.5em;
content: ')'
}
----- Edytowano, aby uwzględnić rozwiązanie z Iazel, w komentarzach -----
Udoskonaliłem Twoje rozwiązanie:
li {
position: relative;
}
li:before {
display: inline-block;
width: 7px;
position: absolute;
left: -12px;
content: ')';
background-color: #FFF;
text-align: center;
}
Tło i position: absolutezałatwił sprawę!
li { position: relative; } li:before { display: inline-block; width: 7px; position: absolute; left: -12px; content: ')'; background-color: #FFF; text-align: center; } tło i pozycja: absolutnie załatwiło sprawę! :)
To działa dla mnie w IE7, FF3.6, Opera 9.64 i Chrome 6.0.4:
<ol start="a" type="a" style="font-weight: normal;">
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number one;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number two;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number three;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number four;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number five;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) </span> content for line number six;</li>
</ol>
jest to wbudowane, ponieważ jest zakodowane dla wiadomości e-mail, ale głównym punktem jest to, że zakres działa jak blok treści i wciąga paren na ujemne lewe terytorium, tak aby był zgodny z numerami listy. oba marginesy mają kompensować różnice IE7 i FF
mam nadzieję że to pomoże.
display:inline-block;?