<li class=“manu-item”>前两个能显示在第一行，第二上开始就不显示了，求指导
贴上html跟css的code
<!DOCTYPE html> <html lang-"en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/reset.css"> <link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/index.css"> </head> <body> <!--公共头开始--> <div class="public-header"> <div class="public-container"> <div class="header-logo"><a href=""></a></div> <ul class="header-nav clearfloat"> <li class="item"><a href="">Our Story</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> <!--公共头结束--> <!--BANNER开始--> <div class="index-banner"> <div class="index-banner-bg"><img src="images/demo1.jpg" alt="banner1"></div> <div class="index-banner-text"> <div class="text-logo"></div> <p class="text-info"> <i class="line-l"></i> <span class="txt">resto restaurant home page website template</span> <i class="line-r"></i> </p> </div> </div> <!--BANNER结束--> <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"> <a class="title"> <h4>Voluptate cilum fugiat.</h4> <p class="comment">Cheese, tomato, mushrooms, onions.</p> </a> <div class="line"></div> <div class="price">$50</div> </li> <li class="menu-item clearfloat"> <a class="title"> <h4>Voluptate cilum fugiat.</h4> <p class="comment">Cheese, tomato, mushrooms, onions.</p> </a> <div class="line"></div> <div class="price">$50</div> </li> <li class="menu-item clearfloat"> <a class="title"> <h4>Voluptate cilum fugiat.</h4> <p class="comment">Cheese, tomato, mushrooms, onions.</p> </a> <div class="line"></div> <div class="price">$50</div> </li> <li class="menu-item clearfloat"> <a class="title"> <h4>Voluptate cilum fugiat.</h4> <p class="comment">Cheese, tomato, mushrooms, onions.</p> </a> <div class="line"></div> <div class="price">$50</div> </li> </ul> </div> <a href="" class="menu-more-btn">load more <span>|</span><span class="icon"></span> </a> </div> <div class="public-container index-list"></div> <div class="public-container index-panel"> <div class="index-panel-header">well</div> </div> <div class="public-container index-panel"> <div class="index-panel-header">well</div> </div> <!--公共尾开始--> <div class="public-footer"> <div class="public-container"> <div class="footer-col"> <p> New York Restaurant<br> 3926 Anmoore Road<br> New York, NY 10014<br> <a class="tel" href="tel:158-5200-5116">158-5200-5116</a><br> </p> </div> <div class="footer-col"> <p> France Restaurant<br> 68, rue de la Couronne<br> 75002 PARIS<br> 02.94.23.69.56<br> </p> </div> <div class="footer-col"> <p> <a href="">Blog</a> <a href="">Careers</a> <a href="">Privacy Policy</a> <a href="">Contact</a> </p> </div> <div class="footer-col"> <div class="footer-logo"></div> <div class="footer-info"> <p> © All Rights Reserved 2014.<br> Find More at Pixelhint.com<br> </p> </div> </div> </div> </div> <!--公共尾结束--> </body> </html>
/*index*/
.index-banner{
position: relative;
background: #b3b3b3;
}
.index-banner-bg{
height: 570px;
overflow: hidden;
}
.index-banner-bg img{
margin: 0 auto;
}
.index-banner-text {
position: absolute;
top: 200px;
left: 50%;
margin-left: -338px;
}
.index-banner-text .text-logo{
width: 776px;
height: 117px;
background: url("../images/index-banner-text.png") no-repeat;
}
.index-banner-text .text-info{
margin-top: 17px;
text-align: center;
color: #FFFFFF;
}
.index-banner-text .text-info .line-l {
display: inline-block;
width: 40px;
border-top: 1px solid #FFFFFF;
vertical-align: middle;
}
.index-banner-text .text-info .line-r {
display: inline-block;
width: 40px;
border-top: 1px solid #FFFFFF;
vertical-align: middle;
}
.index-banner-text .text-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: #FFFFFF;
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: 16px solid #FFFFFF;
}
.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; /*menu第二行就不显示了*/
}
.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;
color: #555555;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.index-menu .menu-item .comment{
margin-top: 4px;
color: #b7b7b7;
font-size: 12px;
}
.index-menu .menu-item .line{
margin-top: 10px;
width: 192px;
border-top: 1px solid #e3e1e1;
}
.menu-more-btn{
margin: 0 auto;
width: 114px;
height: 32px;
padding-left: 16px;
border:1px solid #d7d5d5;
line-height: 32px;
font-size: 14px;
color: #b7b7b7;
}
.menu-more-btn .icon{
display: inline-block;
width: 11px;
height: 7px;
margin-left: 10px;
background: url("../images/loadmore-icon.gif") no-repeat;
}/*common*/
.public-header{
height: 110px;
}
.public-header .header-logo{
float: left;
margin-top: 40px;
}
.public-header .header-logo a{
height: 54px;
width:182px;
background: url("../images/index-header-logo.png");
}
.public-header .header-nav{
float: right;
font-size: 14px;
}
.public-header .header-nav .item{
color: #3b3b3b;
float: left;
margin-top: 44px;
margin-left: 50px;
}
.public-header .header-nav a{
color:#3d3d3d;
}
.public-header .header-nav a:hover{
font-size: 1.2em;
}
.public-container{
position: relative;
margin: 0 auto;
height: 100px;
width: 1100px;
}
.public-footer{
height: 218px;
background: #3b3b3b;
padding-top: 100px;
}
.public-footer .footer-col{
width: 215px;
float: left;
margin-left: 60px;
font-size: 16px;
color: #fff;
line-height:1.8;
}
.public-footer .footer-info {
margin-right: 0px;
width: 230px;
}
.public-footer .footer-col:last-child{
margin-right: 0;
}
.public-footer .footer-logo{
width: 182px;
height: 55px;
margin-top: -10px;
margin-bottom: 12px;
background: url("../images/index-footer-logo.png");
}/*reset*/
body,h1,h2,h3,h4,h5,h6,p,div,dd,dt,dl,li,form,a,textarea{
margin:0;
padding:0;
font-family: "Microsoft YaHei",sans-serif;
}
ol,ul,li{
list-style: none;
}
a{
text-decoration: none;
display: block;
color: #FFFFFF;
}
img{
border: none;
display: block;
}
.clearfloat{
zoom:1;
}
.clearfloat:after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
