display: inline-block; 에서 정렬 순서를 바꿀수있을까요?
본문
display: inline-block; 에서 정렬 순서를 바꿀수있을까요?
<li>1</li>
<li>2</li>
<li>3</li>
이면 결과는 1 2 3 으로 정렬될텐데;;
이걸 3 2 1 로 거꾸로 할수있는 방법이있을까요?
float:right말구 display: inline-block;로 할려고 하고있습니다.
답변 2
css로도 순서 변경이 가능하긴 합니다. 하지만 좀 더 다용도로 사용하기 위해선 jquery로 처리하는 방법을 추천드립니다.
inline-block 으로 하는 방법은 float를 조정하는 방법밖에 없으면 불완전합니다.
예를 들어
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>
----------------------------------------------------------------------------
답변을 작성하시기 전에 로그인 해주세요.
