Height adjustment issue of div according to the height of li tag in html
Question
I am trying set the height of the navigation div for my navigation menu.But I am unable to get why it is not adjusting according to the li tag height.
HTML :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Journeycook</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<div class="wrapper">
<div class="header">
<div class="header-top">
<a href="#" class="logo">
<img src="logo.png" />
</a>
<div class="header-right">
<div class="call">
<img src="call.png" />
1-877-708-1505
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="navigation">
<ul>
<li>
<a href="#" class="act">Home</a>
</li>
<li>
<a href="#">Flights</a>
</li>
</ul>
</div>
</div>
</div>
<body></body>
</html>
CSS :
body {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
img {
max-width: 100%;
}
a img {
outline: 0;
border: 0;
max-width: 100%;
}
.clearfix {
clear: both;
}
a img {
max-width: 100%;
}
ul, li {
list-style: none outside none;
margin: 0;
padding: 0;
}
.wrapper {
position: relative;
width: 100%;
}
.wrapper .header {
margin: 0 auto;
width: 1024px;
}
.header-top {
margin: 3px 0;
}
.header-top a.logo {
display: block;
float: left;
height: 71px;
width: 215px;
}
.header-right {
float: right;
}
.call {
color: #ffc620;
font-size: 39px;
font-weight: bold;
margin-bottom: 10px;
text-align: right;
}
.header-right .call img {
vertical-align: top;
width: 48px;
}
.navigation {
background: #04498E;
border: 1px solid #002E73;
border-radius: 6px;
}
.navigation ul {
}
.navigation ul li {
border-right: 1px solid #1C61A6;
float: left;
}
.navigation ul li a {
color: #FFFFFF;
display: block;
padding: 10px 20px;
text-decoration: none;
}
.navigation ul li a:hover {
background: #ff8c04;
}
.navigation ul li .act {
background: #ff8c04;
}
please experts tell me where i am going wrong
thanks
3 answers
solution1
0 2014-05-10 13:25:45
您尚未指定导航的高度，只需更改以下行即可正常运行：
.navigation { background: #04498E; border: 1px solid #002E73; border-radius: 6px; height:39px; }
solution2
0 2014-05-10 13:31:17
got the solution :)
I forget to add clearfix div after ul tag here is the correct html for navigation div
<div class="navigation">
<ul>
<li>
<a href="#" class="act">Home</a>
</li>
<li>
<a href="#">Flights</a>
</li>
</ul>
<div class="clearfix">
</div>
solution3
0 ACCPTED 2014-05-10 13:33:47
The reason your navigation DIV is not adjusting to your ul is because of the float you put on it, use clear:both after the ul tag float so your nav div knows to adjust itself
You do not need to declare height on your navigation, if you do it will be fixed height
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.