我尝试使用图像来描述我的问题。
*这是我喜欢的东西
*这是我得到的:
HTML
<div class="header">
<ul class="menu">
<li>Home</li>
<li>Contant</li>
</ul>
</div>
<div class="container>
....
</div>
CSS
.header {
background: #77bbf5;
width : 100px;
height: 75px;
line-height: 75px;
}
.menu {
float: left;
list-style-type: none;
background: #955d5d;
position: absolute
}
.menu li {
display: inline;
position: relative;
}
.menu li a {
float: left;
width: 35px;
height: 35px;
line-height: 35px;
margin-left: 12px;
margin-top: 50px;
text-align: center;
display: inline-block;
}
我试过了,试了又试了,请帮忙。
如何解决?
最佳答案
试试这个:
<div class="header">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="container">
....
</div>
CSS:
.header {
background: #32aaff;
width : 400px;
height: 75px;
line-height: 75px;
}
ul {
width:300px;
height:40px;
list-style-type: none;
background: #955d5d;
margin-top:50px;
position:absolute;
margin-left:30px;
}
ul li {
width:80px;
height:30px;
margin:10px;
float:left;
background: #d2d2d2;
}
ul li a {
float: left;
width: 35px;
height: 35px;
line-height: 35px;
margin-left: 12px;
text-align: center;
display: inline-block;
}
.container{
width:400px;
height:500px;
background:#323232;
}
参见 Here
关于html - 菜单 float 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21672850/