메뉴를 가로 정렬을 하고 div 배경색을 지정했는데 안먹힌다.
검색을 해보니 height:auto;min-height: 50px;overflow: hidden; 속성을 지정해주면 된다고 나온다.
box1:after 가상 선택자를 사용했더니 컨텐츠 내용에 따라 높이가 자동인식된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
@charset "UTF-8";
body {font-family: '맑은 고딕', 'Apple SD Gothic Neo', sans-serif}
.menu {list-style-type: none;
margin: 0;
padding: 0;
}
.menu li a {display:block;
padding:10px;
color:#000000;
font-size:16px;
text-decoration:none;}
.menu li a:hover{background-color:#75dbe7;}
.menu:after{content: "";
display:block;
celar:both;}
.menu li {float:left;
width:auto;}
.box1 {background-color:#f1f1f1;}
.box1:after {content: "";
display: block;
clear: both;}
</style>
</head>
<body>
<div class="box1">
<ul class="menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#clients">Our Clients</a></li>
<li><a href="#contact">Contact Us</a></li>
<li><a href="#map">Map</a></li>
</ul>
</div>
</body>
</html>
'Web 프로그램 > 메뉴 만들기' 카테고리의 다른 글
| [bootstrap] Toggle Sidebar Navigation (0) | 2018.11.27 |
|---|---|
| [Javascript] Sidebar Navigation (0) | 2018.11.27 |
| 메뉴 가로 정렬과 세로정렬 (0) | 2018.04.24 |
| 다차원 배열 단순화 및 TreeView SQL (1) | 2017.12.28 |
| [bootstrap] PHP/MySQL 과 연동한 부트스트랩 메뉴 만들기 (2) | 2017.02.15 |
Link2Me
