<li class=“manu-item”>前兩個(gè)能顯示在第一行，第二上開始就不顯示了，求指導(dǎo)
貼上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> <!--公共頭結(jié)束--> <!--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結(jié)束--> <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> <!--公共尾結(jié)束--> </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;
}
2017-02-16
猜一下是不是寬度太大放不下了，沒描述清楚，”第二上開始“是什么意思？