网页中2行每行放5个元素

2019-08-14  本文已影响0人  欣_m

用float加%,实现如下效果

1、设外层DIV为logo,在logo中用ul li放置10张图片,每个img下放一个p。

2、设置ul 和 li为float:left;使他们左浮动排列在一起,但是此时并未保证每行5个元素。

3、设置ul为width:100%;保证在不同大小的屏幕小,ul都是铺满全屏的。用text-align:center;使ul居中。

4、设置li为width:20%;注意是设置li的宽度而不是img以此限制每一块li占20%,即一行有5个li。

5、最后设置图片的大小。此时不论图片大小多大,每行都只有5个元素,因为li已经限制了每行只有5个。只不过如果图片太大它们会叠在一起。

上一篇 下一篇

猜你喜欢

热点阅读