오른쪽 괄호가있는 정렬 된 목록 (HTML) 하위 알파?

오른쪽 괄호가있는 정렬 된 목록 (HTML) 하위 알파?

---

정렬 된 목록의 기본 하위 알파벳 목록 유형은 점 '.'을 사용합니다. a) ... b) ..etc 대신 오른쪽 괄호를 사용하는 방법이 있습니까?

---

여기에 깔끔한 솔루션이 있습니다. (솔직히 이것에 놀랐습니다.) CSS에는 카운터 라는 것이 있습니다. 예를 들어 각 제목에 자동 장 번호를 설정할 수 있습니다. 약간의 수정으로 아래와 같은 결과를 얻을 수 있습니다. 패딩 등을 직접 정렬해야합니다.

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>

모든 최신 브라우저 및 IE9 +에서 작동합니다 (및 IE8 일 수 있지만 버그가있을 수 있음).

업데이트 : 중첩 된 목록이 부모 스타일을 선택하지 않도록 자식 선택기를 추가했습니다. trejder는 또한 목록 항목 정렬도 엉망이라는 의견에서 좋은 지적을 받고 있습니다. 456bereastreet에 대한 기사 에는 절대적으로 카운터 위치를 지정하는 좋은 솔루션이 있습니다.

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>

다음은 중첩 된 목록을 포함하여 결과를 보여주는 jsFiddle 입니다.

---

DisgruntledGoat의 답변을 바탕으로 필요에 따라 하위 목록 및 스타일을 지원하도록 확장했습니다. 누군가에게 도움이 될 경우 여기에 공유하십시오.

https://jsfiddle.net/0a8992b9/ 출력 :

(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

---

이것을 CSS에 추가하면 흥미로운 결과가 나왔습니다. 가까웠지만 시가는 없었습니다.

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

----- 주석에 Iazel의 솔루션을 포함하도록 편집 됨 -----

귀하의 솔루션을 완성했습니다.

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

배경과 position: absolute트릭을했다!

---

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.

참고URL : https://stackoverflow.com/questions/1632005/ordered-list-html-lower-alpha-with-right-parentheses