2012-12-28 2 views
0

css를 사용하여 순서가 지정된 목록으로 3 열 목록을 만들고 싶습니다.CSS - css/Ordered를 사용하여 3 열 만들기

  1. 사과
  2. 오렌지
  3. 레몬 지금은 코드가 명령 보여주는 경우에도 정렬되지 않은 목록을 보여주고있다

.

예 : 1. 사과는 첫 번째 열이고 오렌지는 첫 번째 열의 사과 대신 두 번째 열이되고 첫 번째 열의 사과는 첫 번째 열의 오렌지가됩니다.

<style> ol{margin-bottom:20px; overflow:hidden; width:600px;} 
li{display:inline; float:left; line-height:1px;} 
#two li {width:50%;} 
#three li {width:33.333%;} 
#four li {width:25%;} 
#six li {width:16.666%;} 
</style> 




<code> 
<ol id="3"> 
<li> 
    <div class="fruit"> 
     apples 
     oranges 
     lemons 
     etc.. 
    </div> 
</li> 
</ol> 
    </code> 
+0

당신이하고 싶은 것을 더 명확하게 설명해야합니다. 열이나 정렬 된 목록을 원하십니까? –

+0

또한 실제 코드를 보여주십시오. –

답변

0

<ul>은 정렬되지 않은 목록입니다. 주문 목록에 <ol>을 사용하십시오. 여기

<ol> 
    <li>item 1</li> 
    <li>item 2</li> 
</ol>​ 

는 작업 예제 : flem에 의해 제안 w3schools tryit

+0

안녕하세요 플렘, UL에서 OL 코드로 변경했는데 여전히 인식되지 않습니다. – user1932788

+0

예제를 참조하십시오. 그게 너에게 효과가 있니? 어떤 브라우저를 사용하고 있습니까? 타사 CSS 파일/도구를 사용합니까? 사용자 에이전트 스타일을 재정의하고 있습니까? –

0

,

당신 코드가 보일 것입니다 당신이 #two을 정의 왜 이해가 안

<!DOCTYPE html> 
<html> 
<style> ol{margin-bottom:20px; overflow:hidden; width:600px;} 
li{display:inline; float:left; line-height:15px;} 
#two li {width:50%;} 
#three li {width:33.333%;} 
#four li {width:25%;} 
#six li {width:16.666%;} 
</style> 
<body> 

<h4>An Ordered List:</h4> 
<ol> 
    <li>Coffee</li> 
    <li>Tea</li> 
    <li>Milk</li> 
</ol> 

</body> 
</html> 

같은 , # 등등.

+0

이 파일을 두 번 이상 사용하기 때문에 속성 파일을 사용하여 실제 번호를 호출합니다. 따라서 다른 인스턴스는 3 개의 열, 4 개 등을 사용할 수 있습니다. – user1932788