정렬 된 목록에서 번호를 왼쪽 정렬하려면 어떻게해야합니까?
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
순서 목록에서 번호 뒤의 문자를 변경 하시겠습니까?
1) an item또한 ol 요소의 유형 속성을 사용하는 대신 숫자에서 알파벳 / 로마자 목록으로 변경하는 CSS 솔루션이 있습니다.
나는 주로 Firefox 3에서 작동하는 답변에 관심이 있습니다.
답변
이것은 Firefox 3, Opera 및 Google Chrome에서 작업하는 솔루션입니다. 목록은 여전히 IE7에 표시됩니다 (하지만 닫는 대괄호와 왼쪽 정렬 번호는 제외).
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>편집 : Strager에 의한 여러 줄 수정 포함
또한 ol 요소의 유형 속성을 사용하는 대신 숫자에서 알파벳 / 로마자 목록으로 변경하는 CSS 솔루션이 있습니다.
목록 스타일 유형 CSS 속성을 참조하십시오 . 또는 카운터를 사용할 때 두 번째 인수는 목록 스타일 유형 값을 허용합니다. 예를 들어 다음은 대문자를 사용합니다.
li::before {
content: counter(item, upper-roman) ") ";
counter-increment: item;
/* ... */
답변
스타일 목록을위한 CSS는 여기 에 있지만 기본적으로 다음과 같습니다.
li {
list-style-type: decimal;
list-style-position: inside;
}
그러나, 특정 당신이 후있어 아마 단지 같은과 레이아웃의 내장으로 탐구함으로써 달성 될 수있다 레이아웃 이 (내가 실제로 그것을 시도하지 않은 것을 주) :
ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }
답변
HTML에서 자신의 번호를 지정할 수도 있습니다. 예를 들어 데이터베이스에서 번호를 제공하는 경우 :
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>seq속성은 다른 답변에 주어진 것과 유사한 방법을 사용하여 표시한다. 그러나 사용하는 대신 content: counter(foo), 우리는 사용 content: attr(seq).
답변
다른 답변에서 많은 것을 훔 쳤지 만 이것은 나를 위해 FF3에서 작동합니다. 그것은이 upper-roman균일 들여 쓰기, 가까운 브래킷.
<!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>
답변
나는 : before 속성을 가지고 놀고 그것으로 무엇을 얻을 수 있는지 보는 것이 좋습니다. 그것은 당신의 코드가 정말 멋진 새 브라우저로 제한된다는 것을 의미하며, 여전히 쓰레기 같은 오래된 브라우저를 사용하는 시장의 (성가 시게 큰) 섹션을 제외합니다.
다음과 같이 항목에 강제로 고정됩니다. 예, 너비를 직접 선택하는 것이 덜 우아하다는 것을 알고 있지만 레이아웃에 CSS를 사용하는 것은 비밀 경찰 작업과 같습니다. 동기가 좋더라도 항상 엉망이됩니다.
li:before {
content: counter(item) ") ";
counter-increment: item;
display: marker;
width: 2em;
}
하지만 정확한 해결책을 찾기 위해 실험을해야합니다.
답변
list-style-type 을 다음 과 같이 설정하여 숫자 앞에 0을 추가하면 숫자가 더 잘 정렬됩니다 .
ol { list-style-type: decimal-leading-zero; }