小白的問題：灰色的線條怎么樣和PSD一樣？還有價格也是！是我的代碼哪里出問題了嗎？
HTML:
<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 cillum 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 cillum 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 cillum 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 cillum 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 cillum 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 cillum 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 cillum 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 cillum fugiat.</h4>
? ? ? ? ? ? ? ??<p class="comment">Cheese, tomato, mushrooms, onions.</p>
? ? ? ? ? ? ? ??<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>
CSS:
/*菜單*/
.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 .line {
? ? ??float: left;
}
.index-menu .menu-item .price {
? ? ??float: right;
}
.index-menu .menu-item .title {
? ? ??width: 230px;
? ? ??color: #555;
? ? ??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;
}
.index-menu .menu-more-btn {
? ? ??margin: 0 auto;
? ? ??width: 114px;
? ? ??height: 32px;
? ? ??padding-left: 16px;
? ? ??border: 1px solid #d7d7d5;
? ? ??font-size: 14px;
? ? ??color: #b7b7b7;
}
.index-menu .menu-more-btn .icon {
? ? ??display: inline-block;
? ? ??margin-top: 14px;
? ? ??width: 11px;
? ? ??height: 7px;
? ? ??margin-left: 18px;
? ? ??margin-right: 18px;
? ? ??background: url("../images/index-btn-icon.png") no-repeat;
}
2019-01-13
.index-menu .menu-item .title, 還有.line .price 都是需要float的哦。 title 和line 左浮動 price右浮動