求教大神：css中用li做图片多行，如何做到每行两侧图片各靠div左右边，中间等距，困扰中
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td { margin:0;padding:0; } .ru{ margin: 0 auto; width: 1000px; height: 700px; background-color: yellow; } li{ list-style: none; float: left; margin-right: 20px; } </style></head><body><div class="ru"> <ul class="tu"> <li><img src="photo1.jpg" alt=""></li> <li><img src="photo2.jpg" alt=""></li> <li><img src="photo3.jpg" alt=""></li> <li><img src="photo4.jpg" alt=""></li> <li><img src="photo5.jpg" alt=""></li> <li><img src="photo6.jpg" alt=""></li> <li><img src="photo7.jpg" alt=""></li> <li><img src="photo8.jpg" alt=""></li> <li><img src="photo8.jpg" alt=""></li> <li><img src="photo8.jpg" alt=""></li> </ul></div></body></html>
详细说明：像这样，若干图片多行显示，我是用一个大div，嵌套ul/li来做的，问题是，li做了浮动float left后，我怎么做到每一行的左右两张图片靠左右边，中间等距。我写的代码是margin right，测算距离，但是这样一来，每行右边距离div的边会有一段空白或超出范围换行，不完美。很想知道答案，求教大神。
效果如图所示，
CSS代码如下，适合元素的宽度 【固定】 使用， 拿走不谢
<style type="text/css">
*{margin: 0;padding: 0;}
.ru{
width: 999px;
height: 700px;
border: 5px #ADFF2F solid;
}
.tu>li{
list-style: none;
display: inline;
}
li>img{
width:196px;
height: 200px;
margin-bottom:3px
}
</style>
急!CSS中,怎么让ul li中的图片和文字横向水平居中
建一个div，ul里面包括四个li，在css样式里面设置li水平对齐就行了，text-align:center; 如果发现图片不能对齐的话，可以对它单独设置个padding值。
全部积分求解!div+CSS图片居中与多行多列排列
你浮动以后他自然会往浮动的方向自动对齐（左浮动就左对齐），这时候即使设置text-align也是无效的，而且你的图片都放到li里面，该节点为块级元素，会自动换行，如果要多张图片并列就需要设置浮动，可以尝试用行内元素做，a本身就是行内元素，去掉li，如下：<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML...
div+css中 四个图片在一行中间距相等,左右靠两边
.justify_fix{display:inline-block; width:100%; height:0; overflow:hidden;} 这个是俩段对齐的例子 <ul class="box"> <li class="list"><img src="" alt=""\/><\/li> <li class="list"><img src="" alt=""\/><\/li> <li class="list"><img src="" alt=""\/><\/li> <li ...
请div+css高手兄弟问一个问题,像我图片中这样的ul li列表,我想设置第一...
你可以这样设置float:left; margin-right:10px;这样你就是右边边距10，而左边没有 换行的问题你可以根据你总体的大小而定啊 例如每个字占位16个像素,而你这个LI最多也就4个字符,可以设置每个LI宽度为16X4+5个像素间隔 为每个LI的实际宽度为69像素;左对齐即可;...
求教:用LI排列的图片,其中左边两张上下排列,右边一张大图.左边两张的高...
400px; list-style:none;"> <li style="float:left;"><img src="小图" width="200px" height="200px"\/><\/li> <li style="float:right;"><img src="大图" width="200px" height="400px"\/><\/li> <li ><img src="小图" width="200px" height="200px"\/><\/li> <\/ul> ...
css中 li一行三列后图片加说明怎么加
<li class="aali">这是第一张图片<\/li> <li class="aali">这是第二张图片<\/li> <li class="aali">这是第三张图片<\/li> <li class="aali"><img src='0908090910535564.gif' width="150" height="120" border="0" \/><\/li> <li class="aali"><img src='0908090910157765.gif'...
css控制图片每行显4个怎么写
首先修改css代码：---css---liStyle{width:700px;} .liStyle ul{width:700px;} .liStyle li{width:170px; margin:2px 2px 2px 2px;list-style:none; float:left;"} 接着修改div <div class="liStyle" > <ul ><li> { \/\/ 你的代码 } <\/li> <\/ul> <\/div> 因为不知道你...
HTML CSS中如何实现DIV中的图片水平垂直居中对齐
1、解决水平居中的办法：如果图片左浮动并且"display:inline"时，只要给图片设置一个"text-align:center"属性，就顺利解决了水平居中。2、解决垂直居中的办法：使用display:table-cell和设置了display:inline-block的线合span。完整例子：html代码：<ul class="imgWrap clearfix"><li><a href="#" ...
CSS如何实现DIV左边图片右边文字 下边LI标签
<style type="text\/css">*{margin:0;padding:0;}.loop_div{width:500px;background:#CCC;margin:10px;float:left;}.loop_div div,.loop_div ul{width:100%;overflow:hidden;}.loop_div div img,.loop_div div p{float:left;}.loop_div div img{width:160px;}.loop_div div p{width:...
div+css中li的一个问题
1、先制作一个高为1px宽为4px的图片，左边2px填充黑色，右边2px填充白色，或者透明。2、然后将这张小图当作li的背景图，x轴重复（repeat-x），上下左右居中。3、再给标签a添加背景颜色为白色。参考代码如下：<style> {margin:0;padding:0;} ul{width:600px;margin:20px;} li{list-style:none;...
