html页面分两块，一个div在左边，固定宽100px长40px，右边是<ul><li></li>
html页面分两块，一个div在左边，固定宽100px长40px，右边是<ul><li></li>形式，li有很多个，浏览器最大时是一排显示，浏览器变小是，部分li会到下...
html页面分两块，一个div在左边，固定宽100px长40px，右边是<ul><li></li>形式，li有很多个，浏览器最大时是一排显示，浏览器变小是，部分li会到下一排，但是我希望是左边归左边，右边归右边，而不是多出的li跑到左边div下面
展开
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg-box{
margin: auto;
width: 1000px;/*父容器不写高度由自容器撑开*/
overflow: hidden;/*浮动隐藏*/
border: 4px solid #0000ff;
}
.left-box{
float: left;
height: 50px;
width: 90px;
background-color: #ff00cc;
}
.right-box{
float: right;/*有浮动*/
width: 890px;
border:1px solid #ff00cc;
}
.right-box li{
display: inline-block;/*使块标签固有行标签的属性*/
width:320px;
height:100px;
margin: 20px 20px;
background-color: red;
}
</style>
</head>
<body>
<div class="bg-box">
<div class="left-box">
</div>
<div class="right-box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.bg-box{
margin: auto;
width: 1000px;/*父容器不写高度由自容器撑开*/
overflow: hidden;/*浮动隐藏*/
border: 4px solid #0000ff;
}
.left-box{
float: left;
height: 50px;
width: 90px;
background-color: #ff00cc;
}
.right-box{
float: right;/*有浮动*/
width: 890px;
border:1px solid #ff00cc;
}
.right-box li{
display: inline-block;/*使块标签固有行标签的属性*/
width:320px;
height:100px;
margin: 20px 20px;
background-color: red;
}
</style>
</head>
<body>
<div class="bg-box">
<div class="left-box">
</div>
<div class="right-box">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
