CSS 주 메뉴 가로로 나열하기
페이지 정보
작성자
오원장
쪽지보내기
메일보내기
자기소개
아이디로 검색
전체게시물
댓글 0건
조회 4,634회
작성일 19-07-19 16:09
본문
<!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>
출처: https://jos39.tistory.com/166 [JOS39 블로그]
댓글목록
등록된 댓글이 없습니다.