가로방향 리스트 정렬할때 질문입니다!
그녀는귀여웠다
2023.04.01
위 그림처럼 가로 110px 공간에
30px 사각형을 3개 배열하고
그 이상은 아래로 다시 배열하고 싶은데
30px + margin-right: 10px; 을 주면 3번째 사각형에도 10px이 들어가서
110px을 오버해서 2개씩 들어가게 됩니다.
이럴땐 어떤 방법을 써야 할까요?!
-
Emily
감사합니다^^
-
별햇님
왜 난 이 생각을 못했지. 덕분에 좋은거 배우고 갑니다.(이때까지 클래스 추가하고 그랬는데.)
-
헛장사
1. ie7에서 first-child는 먹히니 li의 margin-right를 margin-left로 바꾸고 li:first-child {margin-left:0;}
2. li들에 margin-left:10px;을 주고 ul에 margin-left:-10px;을 준다
2번째 방법은 4개 이상 되었을 때에도 밀리지 않아요...... 시간나실 때 마이너스마진에 대해 알아보시면 많은 도움이 될꺼에요~ -
우주
last-child는 ie7에서는 사용할수 없으니
ie하위 브라우저 호환을 위해선 마지막 li에 클래스를 주는 방법도 있습니다. -
sin
li:last-child:margin-right:0
주면 되지 않을까 싶은데요.. -
피어나
가상선택자 :last-child