반응형
li는 기본적으로 block 요소이다. block 요소를 인라인처럼 사용하기 위해서는 inline-block으로 선언해주면 된다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</haed>
<body>
<ul class="nav">
<li>menu01</li>
<li>menu02</li>
<li>menu03</li>
<li>menu04</li>
</ul>
</body>
</html>
CSS
.nav {width:100%; text-align:center}
.nav li {display:inline-block; *zoom:1; *display:inline;}
*핵을 줄수 밖에 없다... ie7 이하의 브라우저에서는 먹히질 않는다.
반응형
'Web > HTML' 카테고리의 다른 글
| 디바이스별 viewport 설정 (0) | 2013.04.09 |
|---|---|
| HTML5앱 viewport 공통설정 mj.viewport.js 라이브러리 (0) | 2013.04.09 |
| 레이어팝업 (0) | 2013.04.02 |
| 이미지 썸네일 사용시 롤오버 테두리 만들기 (0) | 2012.11.20 |
| ie에서 html5 렌더링을 도와주는 html5shiv (0) | 2012.11.15 |