정렬 된 목록의 번호를 어떻게 사용자 정의 할 수 있습니까?

109

정렬 된 목록에서 번호를 왼쪽 정렬하려면 어떻게해야합니까?

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에서 작동하는 답변에 관심이 있습니다.

html  css  html-lists  roman-numerals 
— 그롬
소스

답변:

98

이것은 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;
/* ... */
— 그롬
소스
숫자를 다시 추가해야했기 때문에 글로벌 스타일이이를 제거했습니다 (왜 ol를 사용하고 ul이 아닌 숫자를 제거하는지 누가 알겠습니까 ??). 전체 설명과 코드에 대한 매우 명확한 답변 +1은 무엇이든 쉽게 수정할 수 있습니다.
— Morvael 2014
넓은 번호 매기기가있는 목록에서 더 잘 작동하는보다 깨끗한 CSS 여백 / 패딩 솔루션을 제안합니다 ol {counter-reset: item; padding-left: 0;} li {display: block; margin-bottom: .5em;} li:before {display: inline-block; content: counter(item) ") "; counter-increment: item; padding-right: 0.8em;}.
— mmj jul.
28

스타일 목록을위한 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 }
— 마커스 다우닝
소스
1
이렇게하면 숫자가 정렬되지만 텍스트 내용은 그렇지 않습니다.
— grom
13

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).

더 많은 스타일을 가진 CodePen의 데모

— z0r
소스
7
의 value속성 만 사용하면이를 단순화 할 수 있습니다 <li>. 예 : <li value="20">. 그러면 의사 요소가 필요하지 않습니다. 데모
— GWB
1
@GWB 유효하지만 (좋은 솔루션) 목록이 서수이므로 숫자 값으로 제한됩니다. 따라서 value="4A"작동하지 않으므로 같은 작업을 수행 할 수 없습니다 . 또한 값 속성은 속성과 함께 작동 할 수 type있지만 값은 여전히 ​​숫자 여야합니다 (순서 된 집합 내에서 작동하므로).
— jedd.ahyoung
감사합니다-이것은 역순으로 목록을 표시하기 위해 Flying Saucer 가 필요할 때 저에게 효과적 이었습니다 ( reversed속성은 html5 만 사용 value하고 li). 대신에 사용하는 당신의 seq난을 설정 value하고 사용하는 attr(value)대신attr(seq)
— jaygooby
8

다른 답변에서 많은 것을 훔 쳤지 만 이것은 나를 위해 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>
— 스티브 퍼크 스
소스
5

나는 : before 속성을 가지고 놀고 그것으로 무엇을 얻을 수 있는지 보는 것이 좋습니다. 그것은 당신의 코드가 정말 멋진 새 브라우저로 제한된다는 것을 의미하며, 여전히 쓰레기 같은 오래된 브라우저를 사용하는 시장의 (성가 시게 큰) 섹션을 제외합니다.

다음과 같이 항목에 강제로 고정됩니다. 예, 너비를 직접 선택하는 것이 덜 우아하다는 것을 알고 있지만 레이아웃에 CSS를 사용하는 것은 비밀 경찰 작업과 같습니다. 동기가 좋더라도 항상 엉망이됩니다.

li:before {
  content: counter(item) ") ";
  counter-increment: item;
  display: marker;
  width: 2em;
}

하지만 정확한 해결책을 찾기 위해 실험을해야합니다.

— 마커스 다우닝
소스
카운터 재설정이 필요합니다. 항목; 그 블록 앞에.
— Greg
5

HTML5 : value속성 사용 (CSS 필요 없음)

최신 브라우저는 value속성 을 해석하고 예상대로 표시합니다. MDN 설명서를 참조하십시오 .

<ol>
  <li value="3">This is item three.</li>
  <li value="50">This is item fifty.</li>
  <li value="100">This is item one hundred.</li>
</ol>
스 니펫 확장

또한 MDN 에 대한 <ol>기사 , 특히 start및 속성에 대한 문서를 살펴보십시오 .

— 플림
소스
4

Marcus Downing의 답변을 빌리고 개선했습니다 . Firefox 3 및 Opera 9에서 테스트 및 작동합니다. 여러 줄도 지원합니다.

ol {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}

li {
    display: block;
    margin-left: 3.5em;          /* Change with margin-left on li:before.  Must be -li:before::margin-left + li:before::padding-right.  (Causes indention for other lines.) */
}

li:before {
    content: counter(item) ")";  /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
    counter-increment: item;
    display: inline-block;
    text-align: right;
    width: 3em;                  /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example).  Will have to beef up if using roman. */
    padding-right: 0.5em;
    margin-left: -3.5em;         /* See li comments. */
}
— Strager
소스
또한 텍스트 정렬을 원합니다 : left; 옳지 않습니다. 그리고 마지막 줄은 여백 왼쪽이어야합니다 : -3.5em;
— grom
@grom, em 수정에 감사드립니다. 또한 Opera는 기본적으로 목록을 오른쪽 정렬로 렌더링하므로이 동작을 모방했습니다.
— strager
@grom, Firefox 문제는 ... Firefox는 display : inline-block 인 경우에도 float없이 자체 줄에 li : before 가상 요소를 배치합니다.
— strager
@strager, Linux에서 3.0.4를 사용하고 Windows에서 3.0.3을 사용하고 있으며 float 없이도 작동합니다. left; 규칙.
— grom
@grom, 흠, 흥미 롭습니다. 방금 직접 테스트했는데 플로트없이 작동합니다. 내가 잘못 입력했을 수도 있습니다.
— strager
2

번호 매기기 스타일을 변경할 수 있는 Type 속성 이 있지만 숫자 / 문자 뒤의 마침표는 변경할 수 없습니다.

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>
— GateKiller
소스
이 답변의 마크 업을 수정해야합니다. 소문자를 사용하고 속성 값을 "따옴표"로 묶으십시오.
— dylanfm
요소를 닫습니다 : <li> ... </ li>.
— dylanfm
@dylanfm — 제시된 마크 업이 적절하고 100 % 유효한 HTML이라는 것을 알고 계십니까? XHTML이 요청되지 않는 한 XHTML을 사용하지 않는다고 사람들을 반대하지 마십시오.
— Ben Blank
나는 당신을 비하하지 않았습니다. 그리고 네, 그게 사실입니다. HTML. 나는 단지 표준적인 까다로운 사람이었습니다.
— dylanfm
잘못된 html을 게시 한 것에 대해 사과드립니다. 웹 사이트에서 코드를 복사했지만 수정할 생각이 없었습니다. 지금
— 부끄러워요
1

문서에 대해 list-style-position: outside

CSS1은 마커 상자의 정확한 위치를 지정하지 않았으며 호환성 때문에 CSS2는 똑같이 모호합니다. 마커 상자를보다 정확하게 제어하려면 마커를 사용하십시오.

그 페이지 위에는 마커에 대한 내용이 있습니다.

한 가지 예는 다음과 같습니다.

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }
— 스티븐 데네
소스
마커에 대한 모든 예제 ( w3.org/TR/CSS2/generate.html#q11 참조 )가 작동하지 않습니다.
— 그롬
1

아니요 ... DL을 사용하세요.

dl { overflow:hidden; }
dt {
 float:left;
 clear: left;
 width:4em; /* adjust the width; make sure the total of both is 100% */
 text-align: right
}
dd {
 float:left;
 width:50%; /* adjust the width; make sure the total of both is 100% */
 margin: 0 0.5em;
}
— 윌리엄 엔트리 켄
소스
0

나는 그것을 가지고있다. 다음을 시도하십시오.

<html>
<head>
<style type='text/css'>

    ol { counter-reset: item; }

    li { display: block; }

    li:before { content: counter(item) ")"; counter-increment: item; 
        display: inline-block; width: 50px; }

</style>
</head>
<body>
<ol>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
</ol>
</body>

문제는 이것이 이전 버전이나 덜 호환되는 브라우저 에서는 확실히 작동하지 않는다는 것입니다 display: inline-block. 이것은 매우 새로운 속성입니다.

— 마커스 다우닝
소스
0

빠르고 더러운 대체 솔루션. 미리 서식이 지정된 텍스트와 함께 표 문자를 사용할 수 있습니다. 여기에 가능성이 있습니다.

<style type="text/css">
ol {
    list-style-position: inside;
}
li:first-letter {
    white-space: pre;
}
</style>

그리고 당신의 html :

<ol>
<li>    an item</li>
<li>    another item</li>
...
</ol>

li태그와 텍스트 시작 사이의 공백은 표 문자 (메모장 내에서 탭 키를 누를 때 표시되는 문자)입니다.

이전 브라우저를 지원해야하는 경우 대신 다음을 수행 할 수 있습니다.

<style type="text/css">
ol {
    list-style-position: inside;
}
</style>

<ol>
    <li><pre>   </pre>an item</li>
    <li><pre>   </pre>another item</li>
    ...
</ol>
— 마르코 루글 리오
소스
0

다른 답변은 개념적 관점에서 더 좋습니다. 그러나 적절한 숫자 '& ensp;'로 숫자를 왼쪽으로 채울 수 있습니다. 정렬합니다.

* 참고 : 처음에는 번호 매기기 목록이 사용되고 있다는 사실을 인식하지 못했습니다. 목록이 명시 적으로 생성되고 있다고 생각했습니다.

— 지하철
소스
0

여기에 제가 보통 읽고 싶지 않은 대답을 드릴게요.하지만 원하는 것을 달성하는 방법을 알려주는 다른 답변이 있기 때문에 달성하려는 것이 정말 좋은 아이디어.

먼저, 제공된 것과 다른 구분 문자를 사용하여 비표준 방식으로 항목을 표시하는 것이 좋은 생각인지 생각해야합니다.

그 이유는 모르겠지만 타당한 이유가 있다고 가정 해 봅시다.

여기에 제안 된 방법은 주로 CSS : before pseudoclass를 통해 마크 업에 콘텐츠를 추가하는 것으로 구성됩니다. 이 콘텐츠는 실제로 DOM 구조를 수정하여 해당 항목을 추가합니다.

표준 "ol"숫자를 사용하면 "li"텍스트를 선택할 수 있지만 그 앞의 숫자는 선택할 수없는 렌더링 된 콘텐츠가 있습니다. 즉, 표준 번호 매기기 시스템은 실제 콘텐츠보다 "장식"에 가깝습니다. 예를 들어 ": before"방법을 사용하여 숫자에 대한 콘텐츠를 추가하면이 콘텐츠를 선택할 수 있으며 이로 인해 원하지 않는 보피 / 붙여 넣기 문제가 발생하거나이 "새"콘텐츠를 추가로 읽는 스크린 리더의 접근성 문제가 발생합니다. 표준 계산 시스템에.

다른 방법은 이미지를 사용하여 숫자의 스타일을 지정하는 것일 수 있지만이 대안은 자체 문제를 가져옵니다 (이미지가 비활성화 될 때 숫자가 표시되지 않음, 숫자의 텍스트 크기가 변경되지 않음 등).

어쨌든,이 대답에 대한 이유는 단순히이 "이미지"대안을 제안하는 것이 아니라 사람들이 정렬 된 목록에 대한 표준 숫자 체계를 변경하려는 결과에 대해 생각하게하기 위해서입니다.

— 토 마소 펜
소스
0

이 코드는 번호 매기기 스타일을 li 콘텐츠의 헤더와 동일하게 만듭니다.

<style>
    h4 {font-size: 18px}
    ol.list-h4 {counter-reset: item; padding-left:27px}
    ol.list-h4 > li {display: block}
    ol.list-h4 > li::before {display: block; position:absolute;  left:16px;  top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
    ol.list-h4 > li > h4 {padding-top:3px}
</style>

<ol class="list-h4">
    <li>
        <h4>...</h4>
        <p>...</p> 
    </li>
    <li>...</li>
</ol>
— 블라드 알리 바 노프
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.