<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的元素虽然不显示但还是占地方。
详细出处参考:http://www.jb51.net/css/29044.html
分享到:
相关推荐
在CSS布局中,`display`属性是一个至关重要的样式规则,用于定义元素的显示方式。`display:inline-block`是其中一种特殊的值,它结合了`inline`和`block`两种显示特性的优点,使得元素既能像内联元素一样并排显示,...
在网页布局设计中,`display:inline-block` 是一个非常常用且强大的CSS属性,它允许元素在保持块级元素特性的同时,像内联元素一样并排显示。然而,在不同浏览器之间,尤其是在Firefox(FF)上,可能会遇到一些显示...
在网页设计中,`display` 属性是CSS中至关重要的一个属性,用于定义元素的布局方式。`display:inline-block` 是 `display` 的一个值,它结合了块级元素(block-level element)和内联元素(inline element)的一些...
主要给大家介绍了CSS中的display:flex和display:inline-flex属性,文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果,感兴趣的朋友们可以参考借鉴,下面来一起看看吧。
本篇文章将深入探讨`display:inline`、`display:block`以及`display:inline-block`这三种主要的显示模式之间的区别,帮助你更好地理解它们在实际开发中的应用。 首先,我们来看`display:inline`。这种模式使得元素...
本文和大家重点讨论一下CSS display:inline和float:left两者的区别,CSS display是指显示状态,inline表示内联,特点是紧贴着前一个内联元素,通常默认的内联元素有span,a,em,strong等。而float表示的是浮动,float:...
`display:inline-block` 是 CSS 中的一个重要属性,用于控制元素的布局方式。这个属性结合了 `display:inline` 和 `display:block` 的特性,使得元素既能像内联元素一样在一行内排列,又能像块级元素一样拥有宽度、...
在CSS布局中,`display`属性是一个至关重要的样式规则,用于定义元素的呈现方式。`display: inline`、`display: block` 和 `display: inline-block` 是三种常见的值,它们各自具有不同的行为和用途。 1. **display:...
通过本文的介绍,我们可以看到`display:inline-block`是一个非常强大且灵活的CSS属性,它可以帮助我们解决许多网页布局中的难题。然而,需要注意的是,在使用时还需考虑浏览器的兼容性问题,并采取相应的解决措施。...
在CSS布局中,`display: inline-block` 是一个常用的属性,它允许元素以行内元素的方式排列,同时具有块级元素的部分特性,如指定宽度和高度。然而,使用`display: inline-block` 时,元素之间往往会出现一些...
在网页布局设计中,`display:inline-block` 是一个非常实用的CSS属性,它允许元素以行内元素的方式显示,但同时保留着块级元素的特性,如设置宽度、高度以及垂直对齐等。这个属性在处理多列布局,尤其是需要在有限的...
<div> DIV1 </div> <div> DIV2 ...和 display:inline 对应的是 display:block,block 会让应用了该 CSS 属性的 HTML 标记变成块级别元素,例如 SPAN 是行内显示的,但是你加了 display:block 属性就不一样了 <span
`display:inline-block`是CSS布局中的一个重要属性,用于将元素表现得既像内联元素那样在一行内排列,又能像块级元素那样控制其内部内容的布局。这种特性使得`inline-block`在网页布局中非常实用,特别是在创建响应...
在Web开发中,`display:inline-block`是一种非常实用的CSS属性,它允许元素拥有块级元素的特性(如自定义宽度、高度),同时保持内联元素的排列方式,即允许元素在同一行显示。然而,IE6和IE7这两个较老的浏览器对`...