Geordnete Liste (HTML) niedrigeres Alpha mit rechten Klammern?

83

Der Standard-Listentyp mit niedrigerem Alpha für die geordnete Liste verwendet einen Punkt '.'. Gibt es eine Möglichkeit, stattdessen eine rechte Klammer wie a) ... b) ..etc zu verwenden?

html css

— Tony_Henrich
quelle

3

Vielleicht kann eine der Antworten als richtig ausgewählt werden? ...

— Takit Isy

164

Hier ist eine gute Lösung. (Ehrlich gesagt habe ich mich selbst überrascht.) CSS hat so genannte Zähler , in denen Sie beispielsweise automatische Kapitelnummern für jede Überschrift festlegen können. Ein bisschen Modifikation gibt Ihnen das Folgende; Sie müssen die Polsterung usw. selbst aussortieren.

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>

Expand snippet

Works in all modern browsers and IE9+ (and possibly IE8 but may be buggy).

Update: I added child selector to prevent nested lists picking up the parent style. trejder also beings up a good point in the comments that the list item alignment is also messed up. An article on 456bereastreet has a good solution which involves absolutely positioning the counter.

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>

Expand snippet

Here is a jsFiddle showing the result, including nested lists.

— DisgruntledGoat
quelle

1

You are right, this doesn't work in IE6. But good news it works on Firefox 3.5.3.

— mouviciel

1

Actually it would be better if: ol { counter-reset: list; } The original one would not work when there are multiple ols.

— Feng Jiang

1

FYI, to get a numbered list instead of alphabetical, just remove the , lower-alpha. So the content value would be counter(list) ") ";

— Trevan Hetzel

1

Let me only add, that this isn't 100% real numbering. You can see the difference on multi-line items. In normal lists (using standard bullets or numbers) each line has the same indent, so bullet or number looks like standing before block of text. With above solution, each next line starts below numbering and isn't slightly inset. Which doesn't change the fact, that this is really neat solution! :>

— trejder

Plus: This fails completely on multi-level lists (my example at jsFiddle).

— trejder

11

building off of DisgruntledGoat's answer, I expanded it to support sub lists & styles as I needed. Sharing it here in case it helps someone.

https://jsfiddle.net/0a8992b9/ outputs:

(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

— Fydo
quelle

1

+1 You did a reset for alpha. that helped me a lot. Thanks a lot. If someone doesn't have the alpha class, he can use ol[style*="list-style-type: lower-alpha;"]

— SK.

is there a way to have this while also having the text remain to the right of the letter used in the place of a bullet point? i.e. not having the text wrap to under the letter (e.g. a) ) but rather wrap back to the point where the text begins for a particular letter point, as the regular <li> would look

— sabliao

@sabliao add a negative value for text-indent to the li level

— Tyler James Young

3

Adding this to the CSS gave some interesting results. It was close, but no cigar.

li:before {
    display: inline-block;
    width: 1em; 
    position: relative;
    left: -0.5em; 
    content: ')'
}

----- Edited to include solution from Iazel, in the comments -----

I've perfected your solution:

li {
    position: relative;
}
li:before {
    display: inline-block;
    width: 7px;
    position: absolute;
    left: -12px;
    content: ')';
    background-color: #FFF;
    text-align: center;
}

The background and position: absolute did the trick!

— themis
quelle

I've perfected your solution:

li { position: relative; } li:before { display: inline-block; width: 7px; position: absolute; left: -12px; content: ')'; background-color: #FFF; text-align: center; }

The background and position: absolute did the trick! :)

— Iazel

-9

This works for me in IE7, FF3.6, Opera 9.64 and 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;">) &nbsp;</span> content for line number one;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number two;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number three;</li> 
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number four;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number five;</li>
<li><span style="inline-block;margin-left: -9px !important; margin-left: -15px;">) &nbsp;</span>  content for line number six;</li>
</ol>

this is inline because it is coded for an email, but the main point is that the span acts as a content block and pulls the paren into negative left territory so it lines up with the list numbers. the two margins are to compensate for IE7 and FF differences

hope this helps.

— uranoz
quelle

1

Are you sure that's not supposed to be display:inline-block; ?

— JaredMcAteer

This is a hack because it's dependent on the font size when trying to place the paren next to the auto-generated "a", "b", etc char. If you were going to do something like this, you should use list-style-type:none and take over rendering the entire "a)" yourself rather than trying to just render the paren.

— Charles Kendrick