[CSS] ul 태그 - 가로정렬 할 때 유용한 팁 (overflow:auto; 처리 필수)

<ul>태그를 이용해서 , 좌측정렬 사용하기

<ul> 로 tab 메뉴나 가로 리스트를 만들 경우 <li>에 float: left; 값을 줍니다. 아래 캡쳐화면 처럼 말이죠.

 

<ul>정렬

<li>의 float이 left인데, <ul>에 border-bottom이 지정되어 있다. ㅠ.ㅠ

그런데 만약 background를 줘야하거나 위의 캡쳐처럼 border가 필요한 경우 <ul>이 함께 늘어나주지 않습니다. 제가 지금까지 마지막 <li>에 float 속성을 clear 해줘서 둘러싸고 있는 <ul>이 마지막 <li> 를 감싸게 하는 방법으로 이 문제를 해결했었습니다.

<li style="clear: both; float: none; font-size: 0; height: 0;"></li>

이렇게 처리하면 html에는 쓸데없는 <li> 가 하나 추가되어야 하기 때문에 권장할 수 있는 방법은 아닙니다. 저 역시도 html 코드를 줄이기 위해 노력하면서 이런 의미없는 태그가 추가되는 것에 마음이 무척 불편했었답니다.

clear 속성에 대한 글을 보시면 이에 대한 해결 방법이 나와 있습니다.

둘러싸고 있는 <ul>의 hasLayout을 true로 하고, overflow: auto; 를 넣어주면 됩니다. hasLayout을 true로 한다는 말은 width나 height 값을 넣어주라는 말이구요. IE를 제외하고는 overflow: auto; 만 넣어줘도 <ul>이 함께 늘어납니다.마지막으로 이건 현석님이 메신저로 알려주신건데, width나 height를 넣을 수 없는 경우면서 IE에서도 반드시 제대로 보이게 해야 한다면 zoom: 1; 속성을 넣어주면 된다고 합니다. 단, IE6 전용 속성이기 때문에 css validation은 포기해야하구요.


아래는 샘플 css 입니다. 다 아는 속성은 빼고 주요 속성만 담았습니다.

<ul>에 float:left처리 

  ul {
     background-color: orange;
     overflow: auto;
     /* IE6 Hack */ zoom: 1;
  }

  li {
     float: left;
     background-color: yellow;
     margin-right: 5px;
  }

 

 

<ul> 왼쪽, 오른쪽 정렬사용하기

  div.wrap {
     background-color: orange;
     overflow: auto;
     /* IE6 Hack */ zoom: 1;
  }

  li.title {
     float: left;
     background-color: yellow;
  }

  li.more {
     float: right;
     background-color: skyblue;
  }

 

자료출처 : http://zzomen.tistory.com/125