div+css怎么设置让5张图片均匀排列在一行？
我有5副小图，大小都是宽184px；高140px的，我想让他们排列在一行，这个行行宽是960px。排列的时候，每幅图之间就会有10px的间隙。让第一幅图左边靠左边框，第五...
我有5副小图，大小都是宽184px；高140px的，我想让他们排列在一行，这个行行宽是960px。排列的时候，每幅图之间就会有10px的间隙。让第一幅图左边靠左边框，第五幅图右边靠右边框。
在css里应该怎么写呢？ 展开
在css里应该怎么写呢？ 展开
4个回答
展开全部
css部分如下:
img{width:184px; height:140px; float:left; margin-right:10px;}
.m0{margin-right:0;}
html部分如下：
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" class="m0" />
说明：
图片宽度 184×5=920
剩余间距 960－920=40
5张图4个间距，每个 40÷4=10
样式中img将5张图均设置右边距(margin-right)10px，总间距10×5=50
总间距超出剩余间距10，故单独在第5张图上加样式margin-right:0;清除右间距
欲想效果出现
:)
img{width:184px; height:140px; float:left; margin-right:10px;}
.m0{margin-right:0;}
html部分如下：
<img src="" />
<img src="" />
<img src="" />
<img src="" />
<img src="" class="m0" />
说明：
图片宽度 184×5=920
剩余间距 960－920=40
5张图4个间距，每个 40÷4=10
样式中img将5张图均设置右边距(margin-right)10px，总间距10×5=50
总间距超出剩余间距10，故单独在第5张图上加样式margin-right:0;清除右间距
欲想效果出现
:)
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<dl>
<dd><img src="" /> </dd>
<dd> </dd>
<dd> </dd>
<dd> </dd>
</dl>
* {margin:0;padding:0;}
dl dd {float:left;line-height:0; font-size:0;}
dl dd img {display:block;width: ; height: ;}
line-height:0; font-size:0;不能少
要不然出现浏览器不兼容！！
<dd><img src="" /> </dd>
<dd> </dd>
<dd> </dd>
<dd> </dd>
</dl>
* {margin:0;padding:0;}
dl dd {float:left;line-height:0; font-size:0;}
dl dd img {display:block;width: ; height: ;}
line-height:0; font-size:0;不能少
要不然出现浏览器不兼容！！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
img {
margin: 0px 10px 0px 0px;
padding: 0px;
border: none;
width: 184px;
height: 140px;
float: left;
}
margin: 0px 10px 0px 0px;
padding: 0px;
border: none;
width: 184px;
height: 140px;
float: left;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你直接换li中url的链接地址就行了
<!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=gb2312" />
<title></title>
<style>
ul{width:960px; height:140px; list-style:none;}
li{width:184px; height:140px; float:left; background:url(../1.png) no-repeat; margin-right:10px;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li style="margin:0;">5</li>
</ul>
</body>
</html>
<!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=gb2312" />
<title></title>
<style>
ul{width:960px; height:140px; list-style:none;}
li{width:184px; height:140px; float:left; background:url(../1.png) no-repeat; margin-right:10px;}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li style="margin:0;">5</li>
</ul>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
