                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /從 psd 到 html

li的浮動問題

item也就是li的浮動沒有效果?。渴裁丛蚰?/p>

.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>