정렬 된 목록의 기본 하위 알파벳 목록 유형은 점 '.'을 사용합니다. a) ... b) ..etc 대신 오른쪽 괄호를 사용하는 방법이 있습니까?
정렬 된 목록의 기본 하위 알파벳 목록 유형은 점 '.'을 사용합니다. 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>, lower-alpha. 따라서 content값은counter(list) ") ";
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
text-indent받는 li수준
이것을 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트릭을했다!
li { position: relative; } li:before { display: inline-block; width: 7px; position: absolute; left: -12px; content: ')'; background-color: #FFF; text-align: center; } 배경과 위치 : 절대적으로 트릭을했습니다! :)
이것은 IE7, FF3.6, Opera 9.64 및 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>
이것은 이메일 용으로 코딩 되었기 때문에 인라인이지만, 요점은 스팬이 콘텐츠 블록 역할을하고 괄호를 음수 왼쪽 영역으로 가져 와서 목록 번호와 일치한다는 것입니다. 두 마진은 IE7과 FF 차이를 보상하기위한 것입니다.
도움이 되었기를 바랍니다.
display:inline-block;?