오늘은 팝업에 있는 메뉴들을 보다가 글씨가 많아졌을때,
그만큼 높이값이 커지지 않아 문제가 되는 상황을 맞았다.
이방법, 저방법 해보다가 결국 1시간만에 유동적이게 바뀌었고, 왜 헤맸는지 모를만큼 쉬웠다.. ㅠㅠ 그래도 나중에 또 헤맬수 있으니 적어본다.
바뀌기 전 hmlt,css
<style> .menu{width:300px;background:#999;overflow:hidden} .menu li{float:left;width:50%} </style> <ul class="menu"> <li><a href="#n">메뉴1</a></li> <li><a href="#n">메뉴2</a></li> <li><a href="#n">메뉴3</a></li> <li><a href="#n">메뉴4</a></li> <li><a href="#n">메뉴5</a></li> <li><a href="#n">메뉴6</a></li> <li><a href="#n">메뉴7</a></li> <li><a href="#n">메뉴8</a></li> <li><a href="#n">메뉴9</a></li> <li><a href="#n">메뉴10</a></li> </ul>
보면 float을 사용한 걸 알 수 있다. float으로 이렇게 저렇게 해보았는데 float은 띄워지는 것이기 때문에 옆의 높이가 높아진다고 같이 높아지지 않았다.
display:inline-table의 속성도 이용해 보았다.
inline-table의 경우 크롬에서는 잘 동작했지만, 다른 브라우저에선 크롬과 다르게 작용했다.....
해결 display:inline-block
.menu{width:300px;background:#999;font-size:0} .menu li{display:inline-block;width:50%;vertical-align:top;font-size:15px}
inline-block은 태그와 태그사이의 여백이 발생한다. 그리고 이 여백은 폰트에 따라 여백값이 조금 다른듯 하다.
그래서 이러한 속성을 없애주고자, ul에 font-size:0을 주고 li에 font-size를 다시 입력해주었다.
또, inline-block은 vertical-align사용이 가능하다, vertical-align:top을 주어 메뉴명이 길어져도 옆 메뉴가 항상 top에 위치하게 했다.
Hi