div+css布局控制图片？？如何将li中的图片两端对齐，也就是与header的两端一样宽。
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/...
<!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>
<style>
body{text-align:center;}
img{border:0px;}
#header{width:850px;height:50px;background-color:#06c;margin:0px auto;}
#blank{width:850px;height:20px;margin:0px auto;}
#show{width:850px;margin:0px auto;}
#show ul{margin:0px;padding:0px;}
#show li{text-align:center;list-style-type:none;float:left;width:130px;margin:0px auto;padding:0px 35px 20px 0px;line-height:32px;}
</style>
</head>
<body>
<div id="header"></div>
<div id="blank"></div>
<div id="show">
<ul>
<li><img src="pic/1.jpg" width="130" height="130"/><br>我型我淑</li>
<li><img src="pic/2.jpg" width="130" height="130"/><br>花开的季节</li>
<li><img src="pic/3.jpg" width="130" height="130"/><br>田园风光</li>
<li><img src="pic/4.jpg" width="130" height="130"/><br>灰色迷离</li>
<li><img src="pic/5.jpg" width="130" height="130"/><br>诱惑</li>
<li><img src="pic/6.jpg" width="130" height="130"/><br>春</li>
<li><img src="pic/7.jpg" width="130" height="130"/><br>雨季不再来</li>
</ul>
</div>
</body>
</html> 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
body{text-align:center;}
img{border:0px;}
#header{width:850px;height:50px;background-color:#06c;margin:0px auto;}
#blank{width:850px;height:20px;margin:0px auto;}
#show{width:850px;margin:0px auto;}
#show ul{margin:0px;padding:0px;}
#show li{text-align:center;list-style-type:none;float:left;width:130px;margin:0px auto;padding:0px 35px 20px 0px;line-height:32px;}
</style>
</head>
<body>
<div id="header"></div>
<div id="blank"></div>
<div id="show">
<ul>
<li><img src="pic/1.jpg" width="130" height="130"/><br>我型我淑</li>
<li><img src="pic/2.jpg" width="130" height="130"/><br>花开的季节</li>
<li><img src="pic/3.jpg" width="130" height="130"/><br>田园风光</li>
<li><img src="pic/4.jpg" width="130" height="130"/><br>灰色迷离</li>
<li><img src="pic/5.jpg" width="130" height="130"/><br>诱惑</li>
<li><img src="pic/6.jpg" width="130" height="130"/><br>春</li>
<li><img src="pic/7.jpg" width="130" height="130"/><br>雨季不再来</li>
</ul>
</div>
</body>
</html> 展开
展开全部
改图片和li的宽度，如下：
#show ul{margin:0;padding:0 5px;}
#show li{text-align:center;list-style-type:none;float:left;width:110px;margin:0 5px;padding:0;line-height:32px;}
<li><img src="pic/1.jpg" width="110" height="110" alt="pic" /><br />我型我淑</li>
这样实际宽度之和正好850px。
#show ul{margin:0;padding:0 5px;}
#show li{text-align:center;list-style-type:none;float:left;width:110px;margin:0 5px;padding:0;line-height:32px;}
<li><img src="pic/1.jpg" width="110" height="110" alt="pic" /><br />我型我淑</li>
这样实际宽度之和正好850px。
追问
可是尺寸改小了后，一行就有7个了，有点紧凑，我想放5个！而且你的方法，也并未两端对齐啊！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
按照我的改。
把这两个改成：
#show ul{margin:0px;padding:0px;width: 900px;}
#show li{text-align:center;list-style-type:none;float:left;width:130px;margin:0px auto;padding:0px 50px 20px 0px;line-height:32px;}
把这两个改成：
#show ul{margin:0px;padding:0px;width: 900px;}
#show li{text-align:center;list-style-type:none;float:left;width:130px;margin:0px auto;padding:0px 50px 20px 0px;line-height:32px;}
更多追问追答
追问
这个方法可行，我自己也做出来过，只是我想页面内其他模块的宽度都是850px，这个却设为900px了。。。。有没有可能宽设为850px，然后在右侧最后一张图片的padding溢出值给隐藏了呢？
追答
这个靠css就不能自动生成了，除非你用程序。
你用php或者javascript，每五个就给那个li加一个class,比如
body{text-align:center;}
img{border:0px;}
#header{width:850px;height:50px;background-color:#06c;margin:0px auto;}
#blank{width:850px;height:20px;margin:0px auto;}
#show{width:850px;margin:0px auto;}
#show ul{margin:0px;padding:0px;width: 850px;}
#show li{text-align:center;list-style-type:none;float:left;width:130px;margin:0px auto;padding:0px 50px 20px 0px;line-height:32px;}
.last{padding-right: 0 !important;}
我型我淑
花开的季节
田园风光
灰色迷离
诱惑
春
雨季不再来
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
#show li{text-align:center;list-style-type:none;float:left;width:130px;margin:16px;line-height:32px;}
或
#show ul{margin:auto;padding:0px;width:850px;}
#show li{text-align:center;list-style-type:none;float:left;width:130px;margin:0px;padding:19px;line-height:32px;}
你必须得有固定宽度。才可以
或
#show ul{margin:auto;padding:0px;width:850px;}
#show li{text-align:center;list-style-type:none;float:left;width:130px;margin:0px;padding:19px;line-height:32px;}
你必须得有固定宽度。才可以
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
问题解说不明，无显示效果，建议放个地址看效果。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
