-
首先看案例:这里想做出一个仿苏宁导航栏的案例,结构也非常简单,就是一个nav盒子里装10个图片,每个图片做成链接形式。
-
以下就是简要的html代码:
我本来想的是 a设置长和宽 里面的img也修改长宽,子代中的img 由于是inline元素,必须得转换成block块级元素,才能设置自由的高度和宽度,并设置margin值。可是却出现了这种效果:a占据了整行的宽度,可是我明明给a设置了较小的宽度,为什么会出现这种效果呢? -
后来知道了:每个div里面的子元素img转换成块级元素后,导致其所在的div只能一行排列一个。以至于a霸道的独占了一行,width充满整个浏览器的宽度。也就是图中的效果。那怎么消除这种巨丑的样式呢?
重点来了:行内元素使用float属性后,也是将其属性变成inline-block,可以设置宽高,padding,margin属性。
给nav 里的a 给定 float:left ,那么给定a的长和宽才生效了,a终于不是占据一行了。。。效果达成!
如有错误,欢迎指出
11-16
3496