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

在cs中控制多张图片一行显示我们一般会设置float属性为left,这样,多张图片就可以在一行显示了,例如我们把图片放在

图片中的话,我们只需要设置li的float属性为left即可,代码如下:

html代码:

  •              //为了和其他的ul进行却分而设置了ID
  • 1.PNG
  • 2.PNG
  • 3.PNG
  • 4.PNG
  • 5.PNG

css文件的代码如下:

#yihangxianshitupian1 li

{

float:left;

display:inline;

width:200px;

}

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

《css一行显示之:实现多个图片一行显示的方法》地址:www.cunguer.com/article/97.html,本文来自村姑网,您身边的IT专家

www.cunguer.com,转载请注明出处,您的支持是我们创作的源泉~!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐