添加表单元素后，导航区域变成垂直排列
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Career Builder</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="content">
<!-- 顶部区域 -->
<div class="top">
<div class="logo"><a href="#"><img src="../images/logo.png" alt="top-logo"></a></div>
<ul>
<a href="https://www.baidu.com/" target="_blank"><li>HOME</li></a>
<a href="#"><li>ABOUT</li></a>
<a href="#"><li>GALLERY</li></a>
<a href="#"><li>FACULTY</li></a>
<a href="#"><li>EVENTS</li></a>
<a href="#"><li>CONTACT</li></a>
</ul>
</div>
<!-- banner区域 -->
<div class="banner">
<div class="banner-img"><img src="../images/banner3.jpg" alt="banner-img"></div>
<div class="banner-zhezhaoceng"></div>
<div class="banner-form">
<!--
<form>
<input type="text" name="" value="">
</form>
-->
</div>
<!--about区域 -->
<div class="about"></div>
<!-- gallery区域 -->
<div class="gallery"></div>
<!-- 脚部区域 -->
<div class="foot"></div>
</div>
</body>
</html>
CSS代码
*{
margin: 0;
padding: 0;
font-family:"Microsoft YaHei UI";
}
.content{
width:100%;
}
.top{
position:fixed;
left:0;
top:0;
background-color:#07cbc9;
width: 100%;
overflow: hidden;
font-weight: bold;
color:white;
z-index: 9;
}
.top .logo{
padding-left: 100px;
float:left;
}
.top ul{
padding-right: 50px;
list-style: none;
float:right;
}
.top ul li{
font-size: 12px;
color: white;
padding: 0 10px;
line-height: 55px;
float: left;
}
.top ul li:hover{
background-color: black;
}
.banner{
width: 100%;
position: relative;
left: 0;
top: 52px;
}
.banner .banner-img img{
width: 100%;
height: 500px;
}
.banner .banner-zhezhaoceng{
width: 100%;
height: 500px;
opacity: 0.3;
background-color: black;
position: absolute;
left: 0;
top: 0;
}
添加表单元素和未添加对比
正在回答 回答被采纳积分+1
IE浏览器和360浏览器也是可以的，请看下图。
360：
IE:
同学是指添加<form>表单之后出现垂直排列吗？但是我并没有复现处你的情况，即使添加<form>标签之后，也是正常的排列，如下图所示。
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10205 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星