<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin:0px;
padding:0px;
}
#wrap{
width:1000px;
border:2px solid gray;
margin:0 auto;
}
#header{
width:980px;
border:1px solid gray;
margin:0 auto;
text-align: center;
height:90px;
line-height: 90px;
margin-bottom: 5px;
margin-top:5px;
}
#nav{
width:980px;
margin:0 auto;
border:1px solid gray;
text-align:center;
height:90px;
overflow: hidden;
margin-bottom: 5px;
text-align: center;
line-height: 45px;
}
#nav ul li{
float:left;
width:180px;
border:1px solid gray;
list-style: none;
height: 30px;
line-height: 30px;
text-align: center;
}
#content{
width:980px;
border:1px solid gray;
overflow: hidden;
height:270px;
margin:0 auto;
}
.main{
float:left;
width:630px;
border:1px solid gray;
height: 250px;
margin-right: 5px;
margin-top:5px;
text-align: center;
margin-left: 5px;
}
.ban{
width:330px;
height:250px;
border:1px solid gray;
float:left;
margin-top:5px;
text-align: center;
}
#footer{
width:980px;
height: 90px;
border:1px solid gray;
margin:0 auto;
text-align: center;
line-height: 90px;
margin-bottom: 5px;
margin-top:5px;
}
</style>
<body>
<div id ="wrap">
<div id = "header">
<h1>HEADER</h1>
</div>
<div id = "nav">
NAVIGATION
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
<div id="content">
<div class="main">CONTENT</div>
<div class="ban">BANNER</div>
</div>
<div id="footer">
<p>FOOTER</p>
</div>
</div>
</body>
</html>
답변 3
0
jack k
ul에 display:table; 값 추가해도 중앙 정렬 됩니다.
0
인생은멜로디
#nav ul li 에 margin-left 12px 줘보세요 혹시 메뉴끼리 붙이고 싶으신거면
마진 주지마시고 padding: 0 6px;
그냥 저 크기로 가운데 정렬만 하고싶으신거라면 #nav ul li:nth-child(1){ margin-left :33px;}
한번해보세요 ㅠㅠ 개발자마다 스타일이 다르지만 저는 공부하면서 막히면 그냥 복잡하더라도 태그를 추가해서 변경하거나 제스타일로 풀어나갔습니다 홧팅
0
강사님이 완성하신 표만보면서 HTML부터 CSS까지 제가 혼자서 참고1도 안하고 해봤습니다..
그래서 완성해주신 부분이랑 조금씩? 다른데요..
큰 틀은 같다고 생각하는데 어떤 부분이 달라서
<li>태그의 menu1~5번이 중앙정렬이 안되는걸까요?
