Question

我正在尝试为导航菜单设置导航div的高度。但我无法理解为什么它不会根据li标签高度进行调整。

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;
}

请专家告诉我哪里出错了

谢谢

Answer 1

您尚未指定导航的高度，只需更改以下行即可正常工作：

.navigation { background: #04498E; border: 1px solid #002E73; border-radius: 6px; height:39px; }

Answer 2

你想这样看：http://jsfiddle.net/4kjuP/

.navigation { background: #04498E; border: 1px solid #002E73; border-radius: 6px; height:40px; }

Answer 3

得到了解决方案：）

我忘记在ul标签后添加clearfix div这里是导航div的正确html

<div class="navigation">
                <ul>
                    <li>
                        <a href="#" class="act">Home</a>
                    </li>
                    <li>
                        <a href="#">Flights</a>
                    </li>
                </ul>
         <div class="clearfix">
            </div>

Answer 4

导航DIV没有调整到你的ul的原因是因为你把它放在它上面，在ul标签浮动后使用clear:both所以你的导航div知道自己调整

您不需要在导航上声明高度，如果这样做将是固定高度

根据html中li标签的高度调整div的高度问题

4 个答案: