关于HTML的div排列问题## 标题
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Html</title>
<style>
.header{
height: 70px;
outline-offset: 15px;
border:2px solid black;
margin: 0px;
padding: 5px;
}
.content{
border: 1px solid red;
}
.left{
height: 600px;
width: 20%;
float: left;
background-color: white;
}
.fo {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
}
li a:hover:not(.active) {
background-color: #555;
color: white;
}
.right{
height: 600px;
width: 80%;
display: inline-block;
background-color: #ddd;
}
.footer{
background-color: #ddd;
height: 20px;
text-align: center;
}
</style>
</head>
<body>
<div class="header">tou</div>
<div class="content">
<div class="left">
<h3 style="text-align: center">菜单</h3>
<!--可以添加active类来标准那个选项被选中-->
<ul id="fo">
<li><a class="active" href="#home">主页</a></li>
<li><a href="#news">新闻</a></li>
<li><a href="#contact">联系</a></li>
<li><a href="#about">关于</a></li>
</ul>
</div>
<div class="right">
<p>选择检索方式：<select id="three">
<option value="1">顺序检索</option>
<option value="2">二分检索</option>
<option value="3">三分检索</option>
</select></p>
<p>输入检索内容：<input type="text" value=""></p>
<dr></dr>
<input type="submit" value="查找">
</div>
</div>
<div class="footer">版权@201</div>
</body>
</html>
想将content的left和right按比例水平排列，但不是垂直就是被遮挡，最后才知道div子元素按比例排列的时候不能用padding和margin，害，基础太差了。
6742
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
