위와 같은 디자인 작업시 파란 박스 리스트에 float:left로 정렬을 시키고
오른쪽이나 왼쪽에 마진이나 패딩값을 주고, 마지막 또는 첫 박스에
해당 마진이나 패딩을 없애주는 방법을 주로 사용합니다.
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li> <== 보통 이단계에서class또는 style을 이용해 margin 또는 padding 값을 제거합니다.
</ul>
</div>
하지만 개발을 통한 리스트 작업시에는 마지막박스를 체크할 방법이 없습니다.
이 방법을 간단하게 해결할 수 있는 방법은 -margin, -padding 입니다.
<style>
.box{width:540px;height:100px;padding:10px 0;background:pink;}
.box ul{width:560px;margin-left:-10px;overflow:hidden;}
.box ul li{float:left;width:100px;height:100px;margin-left:10px;background:red;}
</style>
위와 같이 li를 감싸는 url에 마진값을 더하고 대신 마이너스 margin값을 주면 됩니다.
이렇게 되면 양옆이 일정한 가이드라인을 기준으로 정렬되게 됩니다.
약간의 꼼수같지만 유용한 팁입니다.
|
