设为首页 - 加入收藏 - 网站地图 - RSS订阅 村姑网-www.cunguer.com
当前位置:首页 > 网页制作 > CSS > 正文

css一行显示之:实现多个图片一行显示的方法

时间:2015-02-25 22:32:27 来源:村姑网 作者:喜欢安静 阅读:181
导读:在前面的几篇文章当中,我们一起学习了在 css 中怎么让文字在一行显示以及文字在一行显示时超出部分自动隐藏,今天我们来一起学习一下在css中如何让 多张图片在一行显示 ,以帮助我们在网页制作中更加的随心所欲。 在cs中控制多张图片一行显示我们一般会设置...

    在前面的几篇文章当中,我们一起学习了在css中怎么让文字在一行显示以及文字在一行显示时超出部分自动隐藏,今天我们来一起学习一下在css中如何让多张图片在一行显示,以帮助我们在网页制作中更加的随心所欲。

    在cs中控制多张图片一行显示我们一般会设置float属性为left,这样,多张图片就可以在一行显示了,例如我们把图片放在<li>图片</li>中的话,我们只需要设置li的float属性为left即可,代码如下:

    html代码:

         <ul id="yihangxianshitupian1">             //为了和其他的ul进行却分而设置了ID
             <li><img src="1.PNG" /></li>
            <li><img src="2.PNG" /></li>
            <li><img src="3.PNG" /></li>
            <li><img src="4.PNG" /></li>
            <li><img src="5.PNG" /></li>
         </ul>

    css文件的代码如下:

         #yihangxianshitupian1 li
         {
              float:left;     
              display:inline; 
              width:200px;    
         }

    运行后你会发现5张图片在同一行显示了,这里由于运行后图片较大,就不切图给大家看了。也就是说如果我们想要在css中控制多个图片在同一行显示的话,只需设置float等于left即可实现。

《css一行显示之:实现多个图片一行显示的方法》地址:http://www.cunguer.com/article/97.html,本文来自村姑网,您身边的IT专家 www.cunguer.com,转载请注明出处,您的支持是我们创作的源泉~!