• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > display:inline的用法

display:inline的用法

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含display,inline等相关知识,佚名 希望在学习及工作中可以帮助到您
<div> DIV1 </div>
<div> DIV2 </div>
这里DIV1和DIV2分别占一行,但是你给他们加上属性后变了
<div style= "display:inline "> DIV1 </div>
<div style= "display:inline "> DIV2 </div>
DIV1和DIV2这时候显示在同一行了,试试看吧

和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了
<span style= "display:block "> SPAN1 </span>
<span style= "display:block "> SPAN2 </span>

display:inline比较经典的用法是用在 <ul> 下的 <li> 中
内联
block一般一个块占一行,除非float
inline是自动排为一行,就象段内的文字一样,可成为多行。

display:inline 的作用是设置对象做为行内元素显示,
inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span)
而我们一般用的div是块级元素,默认display属性是block,
但将div的display设置为inline的话,则多个div可以象span一样显示在一行了。

建议楼主在网上下个css帮助手册
display属性
block :  CSS1 块对象的默认值。将对象强制作为块对象呈递,为对象之后添加新行
none :  CSS1 隐藏对象。与 visibility 属性的hidden值不同,其不为被隐藏的对象保留其物理空间
inline :  CSS1 内联对象的默认值。将对象强制作为内联对象呈递,从对象中删除行
inline-block :  IE5.5 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内
compact :  CSS2 未支持。分配对象为块对象或基于内容之上的内联对象
marker :  CSS2 未支持。指定内容在容器对象之前或之后。要使用此参数,对象必须和 :after 及 :before 伪元素一起使用
inline-table :  CSS2 未支持。将表格显示为无前后换行的内联对象或内联容器
list-item :  CSS2 将块对象指定为列表项目。并可以添加可选项目标志
table-caption :  CSS2 未支持。将对象作为表格标题显示
table-cell :  CSS2 未支持。将对象作为表格单元格显示
table-column :  CSS2 未支持。将对象作为表格列显示
table-column-group :  CSS2 未支持。将对象作为表格列组显示
table-header-group :  CSS2 将对象作为表格标题组显示
table-footer-group :  CSS2 将对象作为表格脚注组显示

display:inline 对应不显示为 display:none
display:block 对应不显示为 hidden
说通俗点 样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方。

您可能想查找下面的文章:

  • display和visibility的区别
  • 浅谈CSS中display/float/position属性值的相互影响
  • css(display,float,position)深入理解
  • 浅谈CSS的Display属性可能的值
  • CSS display属性的table表格布局
  • css display inline block 兼容性问题写法
  • 深入浅析css3 中display box使用方法
  • CSS3 display知识详解
  • 详解css中的display属性
  • 实现div垂直居中的display:table-cell方法示例介绍

相关文章

  • 2017-08-06ie6不支持hover ie6 标签(除a标签)不支持伪类:hover解决方案
  • 2017-08-06CSS inline-block属性概述及其使用示例
  • 2017-08-06CSS3毛玻璃效果(blur)有白边问题的解决方法
  • 2017-08-06css样式去重写法缩减代码量
  • 2017-08-06关于移动互联网手机搜索的特性分析(图文)
  • 2017-08-06CSS3中的opacity属性使用教程
  • 2017-08-06不同CSS技术及其CSS性能之间的差异
  • 2017-08-06CSS3实现iPhone滑动解锁功能代码
  • 2017-08-06一些常用的DIV+CSS的网页布局所用的代码段
  • 2017-08-06网页引入css样式的几种方法

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 用CSS的text-shadow制作超炫文字效果全攻略
    • css中使用ul li ul li ul li ul li 实现四层级联菜单
    • IE6: border的transparent透明解决方案
    • DIV遮罩层如何实现
    • CSS控制当鼠标滑过时更换图片的效果
    • 非首位子元素选择器加号“+”的使用
    • 在css3中background-clip属性与background-origin属性的用法介绍
    • css弹出层代码分享
    • 优秀的CSS 框架整理
    • background-size使用详解

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有