정지 텍스트 배치

Question

I 정렬 된 목록이 있습니다

<ol> 
<li>They used to bring concerns about their children or their marriages. But increasingly parishioners are also telling Glen VanderKloot, a Lutheran minister in Springfield, Ill., about their financial worries, and that puts him in the unusual position of dispensing investment advice.</li> 
<li>This is the Second g</li> 
<li>This is the Third g</li> 
<li>This is the fourth g</li> 
<li> <strong>This is the fifth g</strong> </li> 
<li>This is the seventh g</li> 
<li>This is the eight g</li> 
<li>This is the ninth g</li> 
<li>This is the tenth g</li> 
<li>This is the eleventh g</li> 
<li>This is the twelvth g</li> 
</ol> 

다음과 같이 나타납니다 : 나는 첫 번째 항목과 같은 텍스트를 많이있을 때

1. They used to bring concerns about their children or their marriages. But 
    increasingly parishioners are also telling Glen VanderKloot, a Lutheran 
    minister in Springfield, Ill., about their financial worries, and that puts 
    him in the unusual position of dispensing investment advice. 
2. This is the Second g 
3. This is the Third g 
4. This is the fourth g 
5. This is the fifth g 
6. This is the seventh g 
7. This is the eight g 
8. This is the ninth g 
9. This is the tenth g 
10. This is the eleventh g 
11. This is the twelvth g 

, 나는이 원하는을 위와 같이 형식화됩니다. 나는 이것을 다음과 같이 설정함으로써 달성 할 수 있었다 :

list-style-position:outside; 

그리고 li 및 ol 태그의 여백을 조정했다. 그러나 이것은 두 자리와 세 자리가있을 때 몇 가지 부작용이있었습니다. 나는이 마진을 IE 에서처럼 숫자를 잘라내야했습니다. list-style-position을 inside으로 사용하고 마진을 제거하기 위해 돌아갈 수 있기를 원합니다. 그러나 텍스트는 원하는 번호가 아닌 줄 바꿈됩니다.

누구든지이 포장을 끄는 방법을 알고 있습니까?

Answer 1

을 사용하는 경우 정렬되지 않은 목록을 사용하는 경우 list-style-position:outside;을 사용하면 마커에 대해 항상 동일한 공간이 사용됩니다. 정렬 된 목록을 사용하고 있으므로 list-style-position:inside;을 사용합니다. 문제는 마커의 자릿수 나 글꼴의 크기와 관계없이 IE와 Firefox가 마커의 공간을 동일하게 만든다는 것입니다. 따라서 공간을 직접 만들어 직접 문제를 해결해야합니다. 여기에있는 속임수는 기본적으로 IE와 Firefox가 공간을 만들기 위해 서로 다른 속성을 사용한다는 것을 아는 것입니다.Firefox가 padding (40 픽셀)을 사용하는 동안 IE는 <ol> (30 포인트)에서 margin을 사용하므로 브라우저 간 행복을 위해이 두 값을 모두 재설정해야합니다.

ol { 
    margin-left: 0; 
    padding-left: 3em; 
    list-style-position: outside; 
} 

Answer 2

이 시도 :

li { 
    white-space:nowrap; 
} 

Answer 3

li { white-space: nowrap; } 

이 텍스트가 같은 줄에 표시 할 수 있습니다. 다른 것들도 수평 적으로 확장시킬 수 있습니다.

li { overflow: hidden; } 

이 경우에는 관련이 없지만 LI 요소의 고정 폭을 초과하는 텍스트는 숨겨집니다. 나는이 셀렉터는하지만 IE에서 몇 가지 문제가 있다고 생각

li { word-wrap: break-word } 

:

또한 휴식 단어를 참조하십시오.

Answer 4

문제는 list-style-position : inside "마커와 텍스트 들여 쓰기"입니다. 따라서 당신은 당신이 그것을 사용하려고 시도하는 것을 성취하지 못할 것입니다. (http://www.w3schools.com/CSS/pr_list-style-position.asp) 목록 스타일의 위치는 선택 사항입니다. 바깥 쪽.

일부 목록은 최대 9 개의 항목 (1 자리)을 가질 수 있고 다른 항목은 최대 99 개의 항목 (2 자리)을 가질 수 있고 다른 항목은 최대 999 개의 항목 (3 자리)까지 가질 수 있습니다.

옵션 1 : 각 목록마다 다른 클래스를 생성하십시오 (미리 계산 된 횟수를 알고 있다고 가정).

<ol class='digits1'> 
    <li>item</li> 
    ... 
</ol> 

옵션 2 : 아마 1 자리리스트에 대한 그래서, 당신이 사용하는 것 등 digits2, digits3, 그들을 digits1 전화를 모두 목록을 포기하고 단지 (나는 우) 알고 테이블을 사용합니다. 그러나 목록에 몇 개의 항목이 있더라도 올바른 줄 바꿈 및 들여 쓰기를 보장 할 수 있습니다.