首页 相关文章 CSS中跨浏览器的inline-block实现

CSS中跨浏览器的inline-block实现

我们在制作网页时,有时会希望一个元素既能像 block 一样定义宽度和高度,又可以像普通的 inline 一样不断行。例如下面这张图片中红线标出的地方:

通常我们实现这样的效果会使用这样的代码:

a href=”#”img src=”….” alt=”….” //a

这样虽然可以达到目的,但相对来说代码还是不够精炼,也不够灵活。而理想的方式,我们仅通过下面的代码即可实现:

a href=”#”Yangliu.name/a

这样一来,我们就需要对 a 标签指定 width height 和 background-image。但 a 标签默认的 display 属性是 inline,width、height 是无效的。而如果对 a 设置 display:block,虽然可以解决宽度高度的问题,但元素会自动断行,无法达到我们需要的效果。有没有什么方式可以实现类似 img 标签那样,既可以设定高度宽度,又...[ 查看全文 ]

2016-02-19 标签:

CSS中跨浏览器的inline-block实现的相关文章

手机页面
收藏网站 回到头部