怎么让菜单的div左右分布?
来源：4-3 menu
Yeah___
2018-02-26 21:31
菜单div只会一直往下排列下去,怎么才能让li左右各一个这样排列下去
<ul> <li> <div class="menu-title"> <h4>Voluptate cillum fugiat.</h4> <p>Cheese, tomato, mushrooms, onions.</p> </div> <div class="line"></div> <div class="price">$50</div> </li> <li> <div class="menu-title"> <h4>Voluptate cillum fugiat.</h4> <p>Cheese, tomato, mushrooms, onions.</p> </div> <div class="line"></div> <div class="price">$50</div> </li> <li> <div class="menu-title"> <h4>Voluptate cillum fugiat.</h4> <p>Cheese, tomato, mushrooms, onions.</p> </div> <div class="line"></div> <div class="price">$50</div> </li> </ul>
.menu-list{
width:1100px;
margin:0 auto;
}
.menu-list li{
margin-bottom: 64px;
}
写回答
关注
1回答
-
- SL1023
- 2018-03-01 19:28:32
给<li>一个width，再给一个float: left;
还有你CSS里的menu-list在你的HTML里都没有看到。
贴了代码，你看一下，不知道你是要这个效果吗？(。＾▽＾)
<div class="menu-list"> <ul> <li> <div class="menu-title"> <h4>Voluptate cillum fugiat.</h4> <p>Cheese, tomato, mushrooms, onions.</p> </div> <div class="line"></div> <div class="price">$50</div> </li> <li> <div class="menu-title"> <h4>Voluptate cillum fugiat.</h4> <p>Cheese, tomato, mushrooms, onions.</p> </div> <div class="line"></div> <div class="price">$50</div> </li> <li> <div class="menu-title"> <h4>Voluptate cillum fugiat.</h4> <p>Cheese, tomato, mushrooms, onions.</p> </div> <div class="line"></div> <div class="price">$50</div> </li> </ul> </div>
.menu-list{ width:1100px; margin:0 auto; } .menu-list li{ float: left; width: 520px; margin-bottom: 64px; }
从 psd 到 html
教你把PSD设计稿转化成HTML，用案例来讲解基本流程
105471 学习 · 410 问题
相似问题