你的位置:首页 > 软件开发 > 网页设计 > 详解CSS display:inline

详解CSS display:inline

发布时间:2015-11-01 18:00:07
本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解。基础知识display:inline-block是什么呢?相信大家对这个属性并不陌生,根据名字inline-block我们 ...

详解CSS display:inline

本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解。

基础知识

display:inline-block是什么呢?相信大家对这个属性并不陌生,根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身,简单的说:设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性,又保持了inline元素不换行的特性。

举例说明:以前我们做横向菜单列表的时候,我们可以通过li和float:left两者来实现,现在可以通过li和display:inline-block。

HTML代码:

1 <ul>2   <li>首页</li>3   <li>关于</li>4   <li>热点</li>5   <li>联系我们</li>6 </ul>

原标题:详解CSS display:inline

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。