메뉴 건너뛰기

검색창 닫기

HEUKMYO

Html/css

menu float:left 가로메뉴

흑묘 2013.08.02 15:45 read.321

float:left 가로메뉴 사이 bar, 구분, 파티션 사용
2013.02.25 11:44:31

<style>
.list01 { background:#fff; overflow:hidden; width:400px;} /* width값 사용시 다음 줄로 이동 */
.list01 li {float:left; margin:3px 0 3px -1px; padding:0 12px 0 14px; background:url(partition.gif) no-repeat left 5px; white-space:nowrap;}
</style>

<!-- margin-right:-1px 과 white-space:nowrap 동시 사용 -->

<ul class="list">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
<li><a href="#">메뉴5</a></li>
</ul>



float:left 사용시, li 사이 공간


<style>

.menu{font-size:0} <!-- 폰트 사이즈 0 -->

.menu li{float:left;font-size:12px} <!-- 폰트 사이즈 다시 선언 -->

</style>

<ul class="menu">

<li>메뉴1</li>

<li>메뉴2</li>

<li>메뉴3</li>

</ul>

추가메뉴 목록
위로