할 수 있는 방법을 사용자 정의의 숫자를 정렬된 목록?

StackOverflow https://stackoverflow.com/questions/10877

문제

나는 어떻게 왼쪽 정렬 번호 목록을 정렬?

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

또한이 있 CSS 솔루션을 변경하에서 번호를 알파벳/로마 목록이 사용하는 대신 유형 특성에 충실한 요소입니다.

나는 주로 관심에 응답하는 작업에 Firefox3.

도움이 되었습니까?

해결책

이 방법을 지속적으로 연구하고 있에서 작업하 Firefox3,오페라와 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

또한이 있 CSS 솔루션을 변경하에서 번호를 알파벳/로마 목록이 사용하는 대신 유형 특성에 충실한 요소입니다.

를 참조 list-style-type CSS 을 제공합니다.나면 카운터를 사용하여 두 번째 인수 받 list-style-type 값입니다.예를 들어 다음과 같은 것을 사용하여 위 로:

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

ol {
  list-style: none;
}

ol > li:before {
  content: attr(seq) ". ";
}

데이 CodePen 더 스타일링

을 훔쳐 많은 이에서 다른 답변,하지만 이것은 작업에서 FF3 습니다.그 upper-roman, 균일 들여쓰기,close 괄합니다.

<!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>

나는 제안으로 재생:전에 특성 및 무엇을보고으로 달성할 수 있습니다.그것이 의미하는 코드는 정말 제한 좋은 새로운 브라우저,그리고 제외(성가시게 큰)섹션에서는 시장은 여전히 사용하는 쓰레기 오래된 브라우저

다음과 같이 강제로 고정합니다.그렇다,나는 그것의 더 적은 우아하게 선택해야의 폭을 자신만,CSS 를 사용하여 당신의 레이아웃은 요청 경찰 작동:그러나 좋은 동기,그것은 항상 지저분하다.

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

하지만 당신은 실험을 찾기 위해 정확한 솔루션입니다.

이 숫자는 줄을 더 추가할 경우에는 최 제로 번호를 설정하여, list-style-type 하기:

ol { list-style-type: decimal-leading-zero; }

빌 및 개선 마커의 대답이 다우닝.테스트 및에서 작동 Firefox3 고 오페라하 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. */
}

가 Type 특성 를 변경할 수 있는 번호 스타일,그러나,당신은 변경할 수 없습니다 완전히 정지 후 숫자/문자입니다.

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>

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

CSS1 지정하지 않은 정확한 위치를 마커의 상의 이유로는 호환성,CSS2 남아 똑같이 모호하다.더 정밀하게 제어 마커 상자,사용하시기 바랍 마커입니다.

까지 더하는 페이지는 물건에 대해 마커입니다.

한 가지 예:

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }

아...사용 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;
}

나는 그것이 있다.다음과 같이 하십시오.

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

Catch 이 실 에 작동하지 않습니다 호환 브라우저: display: inline-block 아주 새로운 제공합니다.

빠르고 흙 대체 솔루션입니다.를 사용할 수 있습표 캐릭터와 함께 미리 포맷 텍스트입니다.여기에서의 가능성:

<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 태그 및견의 텍스트표 문자(당신이 무엇을 얻을 때 당신에 tab 키를 내부 메모장).

을 지원해야 하는 경우에는 이전 버전의 브라우저에,당신은 이것을 할 수 있는 대신:

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

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

다른 답변에서 더 나은 개념의 관점입니다.그러나,당신은 단지 왼쪽 패드의 숫자와의 적절한 수의''그들인다.

* 참고:하지 않았 처음에는 것을 인식 번호 목록이 사용되고 있습니다.나는 생각 목록되고 있었다는 명시적으로 생성됩니다.

게 여기는 종류의 대답이 나는 일반적으로 읽고 싶지 않지만,나는 생각으로 다른 답변을 말하고 있는 방법을 달성하기 위하여 당신이 원하는 무엇일 수 있습 니 다시 생각하는 경우에 당신이 시도하고 있는지 무엇을 달성하기 위하여은 정말 좋은 생각이 아니다.

첫째,당신이 생각해야 하는 경우에 그것은 좋은 아이디어를 표시 항목에서는 표준 이외의 방법으로,분리기를 다른 캐릭터 입상을 제공합니다.

내가 알지 못하는 이유는,하지만 당신은 좋은 이유입니다.

방법 propossed 여기에 안성에서 콘텐츠를 추가 당신의 마크업은 주로 여물 CSS:기 전에 pseudoclass.이 내용은 정말 modifing DOM 구조,그 품목을 추가합니다.

을 사용할 때 표준"ol"창을 렌더링된 내용에는"리"텍스트를 선택할 수 있지만,그 번호를 위하지 않을 선택할 수 있습니다.즉,표준 번호 시스템을 것 같다 더 많은"장식"보다는 실제 내용입니다.를 추가하는 경우 내용에 대한 숫자를 사용하여 예를 들어"그 전에"방법,이러한 내용이 선택할 수 있고 경고:등급이 부여되지 않은이,원하지 않을 수행하 vopy/붙여 문제 또는 액 문제를린 독자들이 이것을 읽"새로운"콘텐츠 외에도 표준을 계산 시스템입니다.

아마도 다른 방법이 될 수 있는 스타일이 번호를 사용하여 이미지 있지만,이는 대안을 가져올 것이다 그것의 자신의 문제(숫자를 표시하지 않을 때 이미지가 장애인,텍스트 크기를 위한 수를 변경하지 않,...).

어쨌든,그 이유는 대답은 단지 제안"이 이미지는"하지만 대안을 만드는 사람들 생각에서 결과의 노력 표준을 변경하는 계산 시스템에 대한 주문을 나열합니다.

이 코드 번호 스타일과 같은 헤더의 리 콘텐츠입니다.

<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>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top