중첩 된 목록 항목 스타일

나는 목록을 다음과 같은 배열을 만들려고 해요 .중첩 된 목록 항목 스타일

1. 
    a. TextA 
    b. TextB 
    c. TextC 
2. Text2 
    a. TextA

HTML 코드 :

<ol> 
    <li> 
     <ol> 
      <li>TextA</li> 
      <li>TextB</li> 
      <li>TextC</li> 
     </ol> 
    </li> 
    <li>Text2 
     <ol> 
      <li>TextA</li> 
     </ol> 
    </li> 
</ol>

는 CSS와 함께이 작업을 수행 할 수 있는가가 문제는 현재는 다음과 같습니다이다? 다행히도 FF3을 대상으로해야하기 때문에 고급 CSS 선택기가 필요했습니다. 그러나 ol 태그 앞에 첫 번째 목록 항목에 텍스트가있는 경우 첫 번째 사례를 "감지"하는 것으로 보입니다. CSS를 사용하여이를 수행 할 수 있다고 생각하지 않습니다.

나는 사람들이 때로는 내부 태그 대신 li 태그 아래에 중첩 된 ol을 넣지 만 모양에 차이는 찾을 수 없다는 점도 지적했다.

미리 감사드립니다.

편집 : 나는이 문제에있어 매우 중요한 것으로 밝혀진 것을 언급하지 않았습니다. 왼쪽 대신 오른쪽으로 정렬 할 숫자가 필요합니다. 나는 또 다른 유래 문제에 대한 해결책을 발견, 내가 사용하고있어 CSS는 다음과 같습니다

li { 
    margin-bottom: .5em; 
    margin-left: 25px; 
} 

li:before { 
    display: inline-block; 
    content: counter(item) "."; 
    counter-increment: item; 
    width: 20px; 
    margin-left: -23px; 
}

마지막 7 개 라인은 내가 위의 혼란을 드려 죄송 설명과 같은 목록이 동작하도록!

출처

2009-12-15 Marijn

내가 새로운 문서로 copy and paste your html이되면 원하는 결과를 얻습니다. "1"뒤에 non-breaking space 또는 이와 유사한 것이있는 경우에만 새 줄의 하위 목록을 볼 수 있습니다.

출처

2009-12-15 19:25:52 Annie

목록 번호를 렌더링 할 때 사용하는 CSS를 명확히 해주세요! 당신은 이것에 맞다, 그러나 내가 위에 설명 된 것처럼 행동하는 CSS를 사용하고있을 때. 감사! – Marijn

사용중인 CSS가 모두 확실합니까? CSS를 해당 HTML과 결합하면 두 배가됩니다. – Annie

그래, 주어진 예제와 함께 놀아. 스타일에서 마지막 7 줄을 제거하면 마술처럼 사라집니다.

이 줄은 중요하지만 그 이유는 확실하지 않습니다. 제거가 간격이나 번호 매기기에 전혀 영향을 미치지 않는 것처럼 보입니다.

다음 스타일 코드는 원래의 질문에있어 무엇을 줄 것 같다 - "오른쪽 정렬"을 포함하여 - 난 아직 틀렸다면 정정 해줘하시기 바랍니다 : 나는, 내가 미안 잊고있어

li { 
    margin-bottom: .5em; 
    margin-left: 25px; 
} 
ol ol li {list-style-type:lower-alpha;}

출처

2010-02-22 15:30:05

중첩 된 목록 항목 스타일

답변

관련 문제