div 水平排列 css问题
主料冬瓜400g（右对齐）鸭子500g辅料八角10g陈皮5g像上面这样的div该如何写，以下是自己写的。。当屏幕大小变化的时候。。显示就会乱了。如何改呢。谢谢<style...
主料
冬瓜 400g （右对齐）
鸭子 500g
辅料
八角 10g
陈皮 5g
像上面这样的div该如何写 ，以下是自己写的。。当屏幕大小变化的时候。。显示就会乱了。如何改呢。谢谢
<style>
.list {
margin: 0px 0px 10px;
padding: 0px;
list-style: outside none none;
background-color: #FFF;
box-sizing: border-box;
}
.list {
background: inherit;
color: inherit;
border-color: #303030;
font-weight: 400;
}
.list li {
display: block;
list-style: outside none none;
position: relative;
padding: 10px 10px;
border-bottom: 1px solid #CCC;
}
.list div {
padding: 10px 10px;
}
.list .li1 {
float: left;
width: 70%;
background: #fff;
}
.list .li2 {
float: right;
width: 15%;
background: #fff;
}
.list .span {
width: 100%;
height: 50px;
margin: 0;
padding: 0;
}
</style>
<ul class=list>
<div style="background:#f4f4f4;">主料</div>
<span class="span">
<li class="li1">冬瓜 </li>
<li class="li2">400g </li>
<li class="li1">鸭子 </li>
<li class="li2">500g </li>
</span>
<div style="background:#f4f4f4;">辅料</div>
<span class="span"></span>
<div style="background:#f4f4f4;">调料（自备）</div>
<span class="span">
<li class="li1">八角 </li>
<li class="li2">10g </li>
<li class="li1">陈皮 </li>
<li class="li2">5g </li>
</span> 展开
冬瓜 400g （右对齐）
鸭子 500g
辅料
八角 10g
陈皮 5g
像上面这样的div该如何写 ，以下是自己写的。。当屏幕大小变化的时候。。显示就会乱了。如何改呢。谢谢
<style>
.list {
margin: 0px 0px 10px;
padding: 0px;
list-style: outside none none;
background-color: #FFF;
box-sizing: border-box;
}
.list {
background: inherit;
color: inherit;
border-color: #303030;
font-weight: 400;
}
.list li {
display: block;
list-style: outside none none;
position: relative;
padding: 10px 10px;
border-bottom: 1px solid #CCC;
}
.list div {
padding: 10px 10px;
}
.list .li1 {
float: left;
width: 70%;
background: #fff;
}
.list .li2 {
float: right;
width: 15%;
background: #fff;
}
.list .span {
width: 100%;
height: 50px;
margin: 0;
padding: 0;
}
</style>
<ul class=list>
<div style="background:#f4f4f4;">主料</div>
<span class="span">
<li class="li1">冬瓜 </li>
<li class="li2">400g </li>
<li class="li1">鸭子 </li>
<li class="li2">500g </li>
</span>
<div style="background:#f4f4f4;">辅料</div>
<span class="span"></span>
<div style="background:#f4f4f4;">调料（自备）</div>
<span class="span">
<li class="li1">八角 </li>
<li class="li2">10g </li>
<li class="li1">陈皮 </li>
<li class="li2">5g </li>
</span> 展开
2个回答
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<style>
.div_main{ width:1000px; margin:auto}
.list {
margin: 0px 0px 10px;
padding: 0px;
list-style: outside none none;
background-color: #FFF;
box-sizing: border-box;
}
.list {
background: inherit;
color: inherit;
border-color: #303030;
font-weight: 400;
}
.list li {
display: block;
list-style: outside none none;
position: relative;
padding: 10px 10px;
border-bottom: 1px solid #CCC;
}
.list div {
padding: 10px 10px;
}
.list .li1 {
float: left;
width: 70%;
background: #fff;
}
.list .li2 {
float: right;
width: 15%;
background: #fff;
}
.list .span {
width: 100%;
height: 50px;
margin: 0;
padding: 0;
}
</style>
<div class="div_main">
<ul class=list>
<div style="background:#f4f4f4;">主料</div>
<span class="span">
<li class="li1">冬瓜 </li>
<li class="li2">400g </li>
<li class="li1">鸭子 </li>
<li class="li2">500g </li>
</span>
<div style="background:#f4f4f4;">辅料</div>
<span class="span"></span>
<div style="background:#f4f4f4;">调料（自备）</div>
<span class="span">
<li class="li1">八角 </li>
<li class="li2">10g </li>
<li class="li1">陈皮 </li>
<li class="li2">5g </li>
</span>
</ul>
</div>
</body>
</html>
追问
谢谢。当页面放大后
会变成
主料
冬瓜 辅料 400g （右对齐）
鸭子 调料（自备） 500g
跑到这两个中间去。
追答
你把后面的%去掉，然后换成px试一下
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
