Question

我将导航栏放在简单网页的左侧时出现问题。它必须低于标题部分。这是整个HTML代码。

<html>
<head>
<title>My Homepage</title>
</head>
<style>
#header{
width:800px;
height:200px;
background-color:yellow;
}
#footer{
width:800px;
height:100px;
background-color:red;
clear:both;
}
#nav{
width:200px;
height:400px;
background-color:pink;
float:left;
}
#con{
width:800px;
height:400px;
background-color:gray;
}
</style>
<body>

<div id=external>
<div id=header><b>SAMPLE HEADER<b> <img src="kappa.gif"alt="kappa"height="50"width="50"></div>
<div id=con><iframe name=container width=100% height=100% src=default.html></iframe></div>
<div id=footer><b>PUP COPYRIGHT 2016<b> <img src="pup.jpg"alt="pup"height="50"width="50"></div>
<div id=nav>
<ul>
  <li><a href=AboutUs.html target=container>About Us</a></li>
  <li><a href=ContactUs.html target=container>Contact Us</a></li>
</ul>
</div>

我将导航栏放在简单网页的左侧时出现问题。它必须低于标题部分。

Answer 1

如果您将导航标记移动到直接位于关闭标题div下方，那么您的CSS实际上可以正常工作：

<div id=external>
<div id=header><b>SAMPLE HEADER<b> <img src="kappa.gif"alt="kappa"height="50"width="50"></div>
<div id=nav>
<ul>
  <li><a href=AboutUs.html target=container>About Us</a></li>
  <li><a href=ContactUs.html target=container>Contact Us</a></li>
</ul>
</div>
<div id=con><iframe name=container width=100% height=100% src=default.html></iframe></div>
<div id=footer><b>PUP COPYRIGHT 2016<b> <img src="pup.jpg"alt="pup"height="50"width="50"></div>

Answer 2

请参考代码使其成为

#nav {
    width: 100%;
    height: auto;
    background-color: pink;
    float: left;
}

<div id=external>
    <div id=header><b>SAMPLE HEADER<b> <img src="kappa.gif"alt="kappa"height="50"width="50">
        <div id=nav>
            <ul>
                <li><a href=AboutUs.html target=container>About Us</a></li>
                <li><a href=ContactUs.html target=container>Contact Us</a></li>
            </ul>
        </div>
    </div>

    <div id=con><iframe name=container width=100% height=100% src=default.html></iframe></div>
    <div id=footer><b>PUP COPYRIGHT 2016<b> <img src="pup.jpg" alt="pup" height="50" width="50"></div>
</div>

如何将导航栏放在左侧

2 个答案: