我正在构建一个Web应用程序的原型,但是我遇到了div重叠的问题。
我有一个名为
我有一个名为
#menu
的div,宽度为15%;
,里面有一个子div名为#list
,宽度为100%;
。
乍一看,似乎子 div 没有遵守父 div 的限制,需要记住子 div 具有 position: absolute;
。关于这个主题有一些问题,但我没有找到适合我的问题。其中一些问题涉及在所有 上应用
clear: both
或应用 display: inline-block;
,但都没有起作用。任何帮助将不胜感激。<html>
<head>
<title> PROTOTYPE - opcion.html</title>
<style type="text/css">
body {
margin: 0;
}
#menu {
display: block;
height: 100%;
width: 15%;
background-color:#ff0000;
}
#list {
width: 100%;
top: 180px;
position: absolute;
}
ul {
background-color: aqua;
display: block;
padding: 0;
list-style: none;
}
li {
margin: auto;
width: 100%;
padding: 10px 0px 10px 10px;
border-bottom: 1px solid rgba(0,0,0,.6);
}
li a {
color: #ffffff;
font-size: 25px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
text-decoration: none;
}
</style>
</head>
<body>
<div id="menu">
<div id="list">
<ul>
<li> <a href="#">Customers</a> </li>
<li> <a href="#">Students</a> </li>
<li> <a href="#">Teachers</a> </li>
<li> <a href="#">Android App</a> </li>
</ul>
</div>
</div>
</body>
</html>