li的浮动问题
来源：4-3 menu
qq_眉黛青山_0
2016-07-01 18:35
item也就是li的浮动没有效果啊？什么原因呢
.index-banner{
position: relative;
background: #3b3b3b;
}
.index-banner-bg{
height: 570px;
overflow: hidden;
}
.index-banner-bg img{
margin:0 auto;
}
.index-banner-txt{
position: absolute;
top: 200px;
left: 50%;
margin-left: -338px;
}
.index-banner-txt .txt-logo{
width:776px;
height:117px;
background: url(../images/txt-logo.png);
}
.index-banner-txt .txt-info{
margin-top: 17px;
text-align: center;
color: #fff;
}
.index-banner-txt .txt-info .line{
display: inline;
width: 40px;
border-top: 1px solid #fff;
vertical-align: middle;
}
.index-banner-txt .txt-info .txt{
margin:0 26px;
}
.index-menu{
position: relative;
border-top:4px solid #f34949;
}
.index-menu .menu-tips{
position: absolute;
left:50%;
top:0;
margin-left: -78px;
width: 156px;
height:75px;
text-align: center;
line-height:65px;
color: #fff;
background:#f34949 ;
}
.index-menu .menu-tips:after{
position: absolute;
content: "";
left: 0;
bottom:0;
width:0;
height:0;
border-left: 78px solid transparent;
border-right: 78px solid transparent;
border-bottom: 10px solid #fff;
}
.index-menu .menu-list{
margin-top: 150px;
color: #555;
overflow: hidden;
}
.index-menu .menu-list ul{
width:1160px;
}
.index-menu .menu-item{
float: left;
width:520px;
margin-right: 60px;
margin-bottom: 56px;
}
.index-menu .menu-item .title, .index-menu .menu-item .line{
float: left;
}
.index-menu .menu-item .price{
float: right;
}
.index-menu .menu-item .title{
width: 230px;
overflow: hidden;
white-space: nowrap;
text-overflow:ellipsis ;
}
.index-menu .menu-item .common{
margin-top: 4px;
color: #b7b7b7;
font-size: 12px;
}
.index-menu .menu-item .line{
margin-top: 10px;
width: 192px;
border-top: 1px solid #e3e1e1;
}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/index.css"> <link rel="stylesheet" href="css/cor.css"> <link rel="stylesheet" href="css/reset.css"> </head> <body> <div class="public-header"> <div class="public-container clearfloat"> <div class="header-logo"><a href=""></a></div> <ul class="header-nav clearfloat"> <li class="item"><a href="">OurStory</a></li> <li class="item"><a href="">Menu</a></li> <li class="item"><a href="">Reservations</a></li> <li class="item"><a href="">News</a></li> <li class="item"><a href="">Rviews</a></li> </ul> </div> </div> <div class="index-banner"> <div class="index-banner-bg"><img src="images/demo1.jpg" alt="banner"></div> <div class="index-banner-txt"> <div class="txt-logo"></div> <p class="txt-info"> <i class="line"></i> <span class="txt">resto restaurant home page website template</span> <i class="line"></i> </p> </div> </div> <div class="index-menu"> <div class="menu-tips">The menu</div> <div class="public-container menu-list"> <ul class="clearfloat"> <li class="menu-item clearfloat"> <div class="title"> <a href=""> <h4>voluptate cillum fugiat</h4> <p class="common">Cheese,tomato,mushrooms,onions.</p> </a> </div> <div class="line"></div> <div class="price">$50</div> </li> </ul>
写回答
关注
2回答
-
- 好味
- 2016-07-01 22:07:14
名字写错了，你是不是想设置mune-item,item这个类没有看到你设置样式。
-
- 鱼是的
- 2018-04-27 21:18:09
你好，我也困在这里了， 你找到原因了没
从 psd 到 html
教你把PSD设计稿转化成HTML，用案例来讲解基本流程
105471 学习 · 410 问题
相似问题