<UL><LI>를 이용한 가로정렬 메뉴 만들기
페이지 정보
작성자 서방님 댓글 0건 조회 128회 작성일 15-07-20 17:28본문
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>CSS를 일렬로 나열하기</title>
<style type="text/css">
/* 기본 설정*/
a{text-decoration:none; color:#000000;}
a:hover{color:#ff0000;}
/* nav tag */
nav ul{padding-top:10px;} /* 상단 여백 10px */
nav ul li {
display:inline; /* 세로나열을 가로나열로 변경 */
border-left:1px solid #999; /* 각 메뉴의 왼쪽에 "|" 표시(분류 표시) */
font:bold 12px Dotum; /* 폰트 설정 - 12px의 돋움체 굵은 글씨로 표시 */
padding:0 10px; /* 각 메뉴 간격 */
}
nav ul li:first-child{border-left:none;} /* 메뉴 분류중 제일 왼쪽의 "|"는 삭제
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">MENU1</a></li>
<li><a href="#">MENU2</a></li>
<li><a href="#">MENU3</a></li>
<li><a href="#">MENU4</a></li>
<li><a href="#">MENU5</a></li>
</ul>
</nav>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
