慕妹0475077
2018-11-17 13:22

<div class="public-container menu-list"> <ul class="clearfloat"> <li class="menu-item clearfloat"> <a class="tile"> <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="tile"> <h4>Arcu pede enim justo.</h4> <p class="comment">Tuna, Sweetcorn, Cheese.</p> </a> <div class="line"></div> <div class="price">$45</div> </li> <li class="menu-item clearfloat"> <a class="tile"> <h4>Metus varius laoreet.</h4> <p class="comment">Chicken, mozzarella cheese, onions.</p> </a> <div class="line"></div> <div class="price">$62</div> </li> <li class="menu-item clearfloat"> <a class="tile"> <h4>Cras dapibussemper nisi.</h4> <p class="comment">Pineapple, Minced Beef, Cheese.</p> </a> <div class="line"></div> <div class="price">$32</div> </li> <li class="menu-item clearfloat"> <a class="tile"> <h4>Donec sodales magna.</h4> <p class="comment">Tuna, Sweetcorn, Cheese.</p> </a> <div class="line"></div> <div class="price">$25</div> </li> <li class="menu-item clearfloat"> <a class="tile"> <h4>Quam semper libero.</h4> <p class="comment">Cheese, tomato, mushrooms, onions.</p> </a> <div class="line"></div> <div class="price">$15</div> </li> <li class="menu-item clearfloat"> <a class="tile"> <h4>Saugue velit cursus.</h4> <p class="comment">Pineapple, Minced Beef, Cheese.</p> </a> <div class="line"></div> <div class="price">$30</div> </li> <li class="menu-item clearfloat"> <a class="tile"> <h4>Nam eget dui Etiam.</h4> <p class="comment">Chicken, mozzarella cheese, onions.</p> </a> <div class="line"></div> <div class="price">$35</div> </li> </ul> </div>
.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;
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;
}
很简单啊老哥,你的a标签是块级元素
从 psd 到 html
105538 学习 · 466 问题
相似问题