2012-11-19 5 views
0

다음 HTML을 고려하십시오. 먼저 li 항목을 왼쪽에 정렬하고 마지막 두 항목을 오른쪽에 정렬하고 싶습니다. 그러나 오른쪽 정렬을 마지막 두 가지로 설정하면 중간에 li이 가장 많이 배치되고 가장 오른쪽에 li이 배치됩니다. 이 주문을 수정하려면 어떻게해야합니까?CSS 정렬 순서가 올바르지 않음

HTML :

<ul> 
    <li class="one">left</li> 
    <li class="two">right</li> 
    <li class="three">right last</li> 
</ul> 

CSS :

ul{ 
    width: 100%; 
    overflow: hidden; 
} 

ul li{ 
    float: left; 
} 

ul li.two, 
ul li.three{ 
    float: right 
} 
+0

CSS로 할 수 있다고 생각하지 않지만 틀릴 수도 있습니다. 최선의 방법은 HTML을 변경하여 '2'가 목록의 마지막 부분이되도록하는 것입니다. –

답변

0

오른쪽에 중간 리튬 정렬을 시작으로 그 행동이 그것을 그 그리는 첫하므로, 올바른 오른쪽으로. 그런 다음 마지막 부분이 오른쪽으로 이어집니다.

'float'을 사용할 때 두 개의 서로 다른 ul 태그를 사용하는 방법을 모른다.

1

당신은 리튬의를 정렬 display:inline-block을 사용할 수 있으며 쉼표가 "float: right" 당신에 의해 정의 된 스타일에 없습니다

​li{ 
    display:inline-block 
}​ 
0

을 조정 width를 사용할 수 있습니다. 그것은 "float:right;"

ul{ 
    width: 100%; 
    overflow: hidden; 
} 

ul li{ 
    float: right; 
    display: block; 
    clear: both; 
} 

ul li.one{ 
    float: left; 
} 

문제가 여전히 알려줘 시도해야한다.

관련 문제