怎么让菜单的div左右分布?

源自：4-3 menu

怎么让菜单的div左右分布?

菜单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;
}

提问者：Yeah___ 2018-02-26 21:31

个回答

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;
    }