                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /从 psd 到 html

怎么让菜单的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

源自：从 psd 到 html 4-3

关注问题我要回答

3474

操作

收起

1 回答

SL1023 回答被采纳 +2 积分
2018-03-01

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

0 回复有任何疑惑可以回复我~

收起回答

Yeah___ 提问者

感谢啊!!太厉害了!

2018-03-06 回复有任何疑惑可以回复我~

0/150

提交

取消

从 psd 到 html

参与学习 105536 人
解答问题 466 个

教你把PSD设计稿转化成HTML，用案例来讲解基本流程

进入课程

本课相似问答

1 回答为什么我的菜单部分被遮盖

1 回答菜单里字体的颜色怎么出现的

1 回答我的菜单列表不居中怎么回事？

1 回答不知道怎么用这个代码做下拉菜单

2 回答布局问题的部分

搜索更多本课相关问答

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

我要回答关注问题

热搜

最近搜索清空

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

1 回答

本课相似问答

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