채택완료

display: inline-block; 에서 정렬 순서를 바꿀수있을까요?

2019-07-01 (월) 15:59:42 3,229

display: inline-block; 에서 정렬 순서를 바꿀수있을까요?

<li>1</li>

<li>2</li>

<li>3</li>

이면 결과는 1 2 3 으로 정렬될텐데;;

이걸 3 2 1 로 거꾸로 할수있는 방법이있을까요?

float:right말구 display: inline-block;로 할려고 하고있습니다.

|

답변 2개

채택된 답변
+20 포인트

css로도 순서 변경이 가능하긴 합니다. 하지만 좀 더 다용도로 사용하기 위해선 jquery로 처리하는 방법을 추천드립니다.

inline-block 으로 하는 방법은 float를 조정하는 방법밖에 없으면 불완전합니다.

예를 들어

Copy
UL[myUL] li:nth-child(1) { float:right; }

UL[myUL]  li:nth-child(2) { /*정의안함*/ }

UL[myUL]  li:nth-child(3) { float:left; }

위와 같이하면 아래와 같이 정렬됩니다만... 크기를 맞추어주어야 하고..

순서의 정렬이 불안정합니다.

float:right 순서대로 오른쪽에 쌓이는 것입니다.

만약 다섯개정도되면서 2,1,3,5,4 는 안된다는 것이죠....

그래도 어거지 피우면 할수도 있긴 합니다만 욕먹는 코드가 나오게 될 겁니다.

스스로 하시면 화나는 코드가 되고요

----------------------------------------------------------------------------

<UL  myUL>

<li>3</li><li>2</li>                               <li>1</li>

</UL>

----------------------------------------------------------------------------

답변을 작성하려면 로그인이 필요합니다.