美文网首页
网页中2行每行放5个元素

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

作者: 欣_m | 来源:发表于2019-08-14 19:21 被阅读0次

    用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个。只不过如果图片太大它们会叠在一起。

    相关文章

      网友评论

          本文标题:网页中2行每行放5个元素

          本文链接:https://www.haomeiwen.com/subject/ykinjctx.html