Question

怎么实现CSS横排图片并列2-4张

CSS小白，代码如下，怎么更改才能实现这样的排列，

/*门户频道文章图片列表*/
.mydl_width{height:auto;padding:12px 0;background-color:#EBF5EC}
.mydl_width ul{ margin:0;padding:0;}

.myul{}
.myul li{width:220px;height:auto;display:block;float:left; margin-left:10px;margin-bottom:5px; text-align:center;}
.myli{}
.myh3{width:210px;height:50px;min-height:20px;line-height:22px;text-align:center;margin-top:3px;font-size:12px;}

.myliimg img{padding: 5px; width: 168px; height: 126px; border: 1px solid #CCC; background: {WRAPBG}; }

Answer 1

1. 最常用的一种方法：就是浮动,浮动之后会自动往右挤，挤不下就到第二行了。    

2.      <ul>
              <li>第一张图片</li>
              <li>第二张图片</li>
              <li>第三张图片</li>
              <li>第四张图片</li>
              <li>第五张图片</li>
              <li>第六张图片</li>
              <li>第七张图片</li>
              <li>第八张图片</li>
       </ul>
   <style>

   ul{width:800px; height:200px;}

   li{width:195px;height:98px;margin:1px auto; float:left;list-style-type:none}
   </style>

Answer 2

<ul id="list">
    <li><a class="pic" href="#"><img src="" alt="" /></a><p class="title">水电费爽肤水方式是否</p></li>
    <li><a class="pic" href="#"><img src="" alt="" /></a><p class="title">水电费爽肤水方式是否</p></li>
    <li><a class="pic" href="#"><img src="" alt="" /></a><p class="title">水电费爽肤水方式是否</p></li>
</ul>

#list li{float:left;width:100px;padding:6px;list-style:none;}
#list li .pic{display:block;width:80px;margin:0 auto;border:1px solid #cccccc;padding:2px;}
#list li .pic img{width:80px;height:80px;}

上面这样就可以实现, 主要就是li浮动

Answer 3

.myul li{float: left;width:220px;height:auto;display:block;float:left; margin-left:10px;margin-bottom:5px; text-align:center;}
给li加个左浮动就OK了
float: left;

Answer 4

用CSS编辑框架 想排张就写几个框架 前提是图片大小要合适

Answer 5

用UL LI便利，LI设置float:left就可以