CSS를 사용하여 순서가 지정된 목록의 오른쪽 맞춤법 스타일 번호와 왼쪽 맞춤 텍스트

설명서를 작성하는 동안 주문 목록에서 순서 목록을 사용하여 개요를 만들고 CSS를 사용하여 의사 법적 스타일 행 번호 매기기를 적용했습니다. 목록의 기본 동작은 숫자를 오른쪽 정렬하고 텍스트를 왼쪽 정렬하는 것입니다. 그러나 CSS2 스 니펫은 왼쪽 정렬 된 흐름이 잘못되었지만 숫자가 왼쪽 맞춤 및 텍스트가되도록 동작을 변경합니다. http://www.w3.org/TR/CSS2/generate.html CSS를 사용하여 순서가 지정된 목록의 오른쪽 맞춤법 스타일 번호와 왼쪽 맞춤 텍스트

에서 파생 CSS2 조각을 사용
:

기본 동작 (번호 10 하이라이트 원하는 정렬) :

1. Item 
2. Item 
    1. Item 
    2. Item 
     1. Item 
     2. Item 
3. Item 
... 
10. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nunc et diam sem. Pellentesque vitae dolor id eros commodo 
    dapibus tristique sit amet eros. Pellentesque turpis turpis.

스타일이 적용된 행동 (수 10 하이라이트 바람직하지 않은 정렬) 다음의 예를 참조하십시오

OL { counter-reset: item } 
LI { display: block } 
LI:before { content: "("counters(item, ".") ") "; counter-increment: item }

결과 :

(1) Item 
(2) Item 
    (2.1) Item 
    (2.2) Item 
      (2.2.1) Item 
      (2.2.2) Item 
(3) Item 
... 
(10) Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Nunc et diam sem. Pellentesque vitae dolor id eros commodo 
dapibus tristique sit amet eros. Pellentesque turpis turpis.

LI { display: block }은 기본 번호 매기기를 억제하고 있으며 LI:before은 카운터 값이있는 "일반"텍스트 접두사입니다. 법적인 스타일의 번호 매기기와 원하는 숫자와 텍스트의 정렬을 모두 가질 수 있습니까?

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Outline</title> 
<style type="text/css"> 
ol { 
counter-reset: item; 
list-style-position: outside 
} 
li { 
display: block; 
padding-left: 10px; 
} 
li:before { 
content: "("counters(item, ".") ") "; 
counter-increment: item 
} 
</style> 
</head> 

<body> 
<h1>Outline</h1> 
<ol> 
    <li>Item</li> 
    <li>Item 
    <ol> 
     <li>Item</li> 
     <li>Item 
     <ol> 
      <li>Item</li> 
      <li>Item</li> 
     </ol> 
     </li> 
    </ol> 
    </li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
    Nunc et diam sem. Pellentesque vitae dolor id eros commodo 
    dapibus tristique sit amet eros. Pellentesque turpis turpis.</li> 
</ol> 
</body> 
</html>

출처

2010-08-11 Anonymous

약간 어색한 해결책이 될 수 있습니다 : 이것은 단지 li 텍스트가 오른쪽으로 이동 할 수 있도록 position: relative;를 사용

ol { 
    width: 10em; 
    counter-reset: item; 
    list-style-position: outside; 
} 

li { 
    position: relative; 
    left: 2em; 
    display: block; 
    list-style-position: outside; 
} 

li:before { 
    content: "("counters(item, ".") ") "; 
    counter-increment: item; 
    position: absolute; 
    left: -2.5em; 
} 

li li:before { 
    left: -2.5em; 
} 

li li li:before { 
    left: -3em; 
}

(left: 2em; 여기

이 문제를 보여주는 전체 문서의)을 입력하고 li:before 텍스트를 절대적으로 배치하고 왼쪽으로 옮깁니다.

어색한 부분은 li:before에 대해 다른 left: 값을 지정해야한다는 것에서 비롯됩니다. 즉, and 이전에 li li : before`이므로 매우 간단하지는 않습니다. http://jsbin.com/asaru3

영업 이익 의견에 대 한 응답에서을 편집 :

내가 넘어서 해낸의 데모있다

감사합니다, 나는 작품을 어떻게 이해 믿습니다. 패턴을 계속하려면 4 레벨 이상인 "li li li li"를 만들어야합니다. 맞습니까? 또한 숫자가 왼쪽 정렬되지는 않습니다. 그 가치에 도달하고 비슷한 재배치 또는 정렬을 적용 할 수있는 방법이 있습니까?

숫자가 오른쪽 정렬되지 않았 음을 의미합니다.

'패턴을 계속하려면 첫 번째 질문에'리 li li [리 : 전에 :] '목록을 ... 4 수준 깊이 만들어야 겠어? "그래, 어느 하나의 이유는 그것이 어색한 해결책이라고 생각합니다 .은 일을합니다.

후자의 질문에 답하기 위해 숫자를 오른쪽 가장자리에 맞추기를 원합니다.

당신이 li:before의 CSS를 수정하는 경우 : li:before의 내용의 크기가 li의 left: 위치보다 작아야합니다 마음에 이러한 접근 방식 베어와 함께

li:before { 
    content: "("counters(item, ".") ") "; 
    counter-increment: item; 
    position: absolute; 
    left: -2.5em; 
    display: block; 
    width: 2em; /* to give the same dimensions to all counter 'blocks' */ 
    text-align: right; /* does exactly what you'd think =) */ 
}

을, 그렇지 않으면 중복이있을 수 있습니다 카운터 및 내용.

카운터의 크기가 커지면 너비도 li li:before, li li li:before으로 수정되어야합니다.

데모에서 : http://jsbin.com/ovuru3

출처

2010-08-11 17:58:53

감사합니다, 나는 그것이 어떻게 작동하는지 이해 믿습니다. 패턴을 계속하려면 4 레벨 이상인 "li li li li"를 만들어야합니다. 맞습니까? 또한 숫자가 왼쪽 정렬되지는 않습니다. 그 가치에 도달하고 비슷한 재배치 또는 정렬을 적용 할 수있는 방법이 있습니까? –

숫자가 오른쪽 정렬되지 않았 음을 의미합니다. –

다시 한번 감사드립니다. 나는 방금 CSS에 관한 책을 많이 사서 좋은 자원을 갖고있다.하지만 전문가를 두들겨 우기는 좋은 방법은 없다. –

CSS를 사용하여 순서가 지정된 목록의 오른쪽 맞춤법 스타일 번호와 왼쪽 맞춤 텍스트

답변

관련 문제