display:inline;怎么用?

作者&投稿:井祥 (若有异议请与网页底部的电邮联系)
display:inline的经典用法~

display:inline比较经典的用法是用在 下的 中 内联 block一般一个块占一行,除非float inline是自动排为一行,就象段内的文字一样,可成为多行。display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认display属性是block, 但将div的display设置为inline的话,则多个div可以象span一样显示在一行了。display:inline 对应不显示为 display:nonedisplay:block 对应不显示为 hidden说通俗点 样式为none的元素不占位置,而样式为hidden的元素虽然不显示但还是占地方。

定义和用法
display 属性规定元素应该生成的框的类型。
说明
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。
注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去除了。
默认值:inline
继承性:no
版本:CSS1
JavaScript 语法:object.style.display="inline"
实例
使段落生出行内框:
p.inline
{
display:inline;
}
TIY
浏览器支持
所有主流浏览器都支持 display 属性。
注释:如果规定了 !DOCTYPE,则 Internet Explorer 8 (以及更高版本)支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
可能的值
值描述
none此元素不会被显示。
block此元素将显示为块级元素,此元素前后会带有换行符。
inline默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block行内块元素。(CSS2.1 新增的值)
list-item此元素会作为列表显示。
run-in此元素会根据上下文作为块级元素或内联元素显示。
compactCSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
markerCSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table此元素会作为块级表格来显示(类似 ),表格前后带有换行符。
inline-table此元素会作为内联表格来显示(类似 ),表格前后没有换行符。
table-row-group此元素会作为一个或多个行的分组来显示(类似 )。
table-header-group此元素会作为一个或多个行的分组来显示(类似 )。
table-footer-group此元素会作为一个或多个行的分组来显示(类似 )。
table-row此元素会作为一个表格行显示(类似 )。
table-column-group此元素会作为一个或多个列的分组来显示(类似 )。
table-column此元素会作为一个单元格列显示(类似 )
table-cell此元素会作为一个表格单元格显示(类似 和 )
table-caption此元素会作为一个表格标题显示(类似 )
inherit规定应该从父元素继承 display 属性的值。
TIY 实例

Vue实践-CSS样式position/display/float属性对比使用



display属性值:
none 此元素不会被显示。
block 此元素将显示为块级元素,此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
inline-block 行内块元素。(CSS2.1 新增的值)
list-item 此元素会作为列表显示。
run-in 此元素会根据上下文作为块级元素或内联元素显示。
compact CSS 中有值 compact,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
marker CSS 中有值 marker,不过由于缺乏广泛支持,已经从 CSS2.1 中删除。
table 此元素会作为块级表格来显示(类似 <table>),表格前后带有换行符。
inline-table 此元素会作为内联表格来显示(类似 <table>),表格前后没有换行符。
table-row-group 此元素会作为一个或多个行的分组来显示(类似 <tbody>)。
table-header-group 此元素会作为一个或多个行的分组来显示(类似 <thead>)。
table-footer-group 此元素会作为一个或多个行的分组来显示(类似 <tfoot>)。
table-row 此元素会作为一个表格行显示(类似 <tr>)。
table-column-group 此元素会作为一个或多个列的分组来显示(类似 <colgroup>)。
table-column 此元素会作为一个单元格列显示(类似 <col>)
table-cell 此元素会作为一个表格单元格显示(类似 <td> 和 <th>)
table-caption 此元素会作为一个表格标题显示(类似 <caption>)
inherit 规定应该从父元素继承 display 属性的值。


CSS行内块元素与行内元素的区别?
2、display:inline-block;可以让元素具有块级元素和行内元素的特性:既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。是一个很实用的属性。3、元素可以设置weith和height,行内元素设置width和height无效,而且块级元素即使设置宽度也还是独占一行。4、块级元素可以设置margin和paddin...

indisplay还是ondisplay
ondisplay。“ondisplay”的意思是展览、陈列、公开展出的状态,这个短语用于描述物品、艺术品、展品等在公共场所或展览中展示的情况,而“indisplay”并不是一个标准的英语短语,正确的是“ondisplay”。

display是什么意思中文
3、A waxwork of French President Nicolas Sarkozy gets a few final touches before going on display at Madame Tussaud's in London.(法国总统尼古拉·萨科齐的蜡像在伦敦杜莎夫人蜡像馆展出前进行了最后的润色。)4、The system can be widely used for graphic display of hydraulic factors of ...

display什么意思中文翻译
display_百度翻译 display英[dɪˈspleɪ]美[dɪˈsple]n.展览,陈列;陈列品,展览品;显示器;炫耀 vt.显示;陈列;展开,伸展;夸示,炫耀 vi.(计算机屏幕上)显示 [例句]Search engines sometimes display this description under links in search results.搜索引擎有时会...

css ul的display设成inline-block,li为什么没有横向。还有怎么均分li...
ul的display设成inline-block又不是li的,li当然不横向了。不过习惯都是用float:left来做。等分情况多多,li有边框还要考虑到两个li靠在一起边框也挤一起,看起来就粗了不好看,又要处理。所以等分看情况吧!

如何理解CSS的display属性
display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有:none block inline inline-block inherit 下面,我将按照顺序将上述几种属性做一个完整的讲解。第一部分:display:none none这个值表示此元素将不被显示。比如,当我们在浏览网页时,如果看到了某个烦人的广告遮挡了我们的实现,更为...

display单词由来.用法
She showed her favor.她表示给予支持.2.show是有意识地展示; display则是费力地明显表现.例如:She never shows her feelings.她的感情从不外露.Department stores display their goods in the windows.百货商店把商品陈列在橱窗里.3.show较真实; display有时带有较大的夸耀性.例如:Does the mark of...

css中的inline是什么意思?
而对应的是display:inline;的意思是把区块元素转换成内联元素 例如:就属于内联标签,如果你想把他当做这类标签来使用,这时display:block;就可以使用了!【要注意的是,任何标签的使用最好遵循WEB标准】就属于块级元素,你如果想让列表显示在一行,这时就可以对标签设置display:inline;不知道你理解没,...

Q1:display前应用什么介词?at?in? Q2:是at\/in display 还是at\/in...
The car model is on display 汽车模型正在展示中

javascript中 visibility和display的区别
区别:1、占用域的空间不同。visibility要占用域的空间,而display则不占用。visibility和display都可以实现对页的隐藏,例如:将元素display属性设为 block,会在该元素后换行。将元素display属性设为 inline,会消除元素换行。将元素display属性设为 none,隐藏该元素内容,且不占用域的空间。将元素visibility...

铜仁市19788126278: display:inline - 搜狗百科
夏美盖三: 1,display:inline 用的比较少.主要用于在IE6做导航栏时候出现双倍bug,才将块状元素设置为display:inline 2,display:block 将行内元素设置为块状元素,从而可以设置该元素的宽和高,并且如果设置了block的话默认会占一行,除非设置float 3,display:inline-block 行内块状元素,可以设置宽和高,也可以在一行内显示.

铜仁市19788126278: display:inline的经典用法 -
夏美盖三: display:inline比较经典的用法是用在2113 <ul> 下的 <li> 中 内联 block一般一个块占一行,除非float inline是自动排为一行,就象段5261内的文字一样,可成为多行.display:inline 的作用是设置对象做为行内元素显示4102,inline是内联对象的默认...

铜仁市19788126278: display属性的inline和block在什么地方才能用到 -
夏美盖三: 它可以让行内显示为块的元素,变为行内显示,例如<div> DIV1 </div><div> DIV2 </div> 这里DIV1和DIV2分别占一行,但是你给他们加上属性后变了<div style= "display:inline "> DIV1 </div><div style= "display:inline "> DIV2 </div> DIV1和...

铜仁市19788126278: 请问在CSS中关于display:inline的理解 -
夏美盖三: display:inline;就是将本来是块级的元素显示为内嵌的元素,比如div是一个块级元素,设置了display:inline之后,就会跟其他元素在同级显示了 例:text1text2 这里的text1跟text2是分开在两行显示的 而 texttext2 这里的text1和text2则是在同一行显示的

铜仁市19788126278: CSS的display属性设置都怎么用?要经验之谈的用法 -
夏美盖三: 这么多啊....就懂inline 标签分为两种,block和Inline,block的特点就是每行只能有一个,inline的特点就是后面的会接在前一个的后面,到了屏幕放不下才换行.div默认的是block,a就是inline了.需要转换放置方法的时候可以接上display:inline; 来改变属性.

铜仁市19788126278: display:inline; 这是什么意思? -
夏美盖三: display:inline;是把标签转换为行内标签.

铜仁市19788126278: 怎么解决IE6双倍边距问题display:inline -
夏美盖三: 2、解决办法:当将其display属性设置为inline时问题就都解决了. 3、说明:这是因为块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距就会出现这种情况.也许你会问:“为什么第二个对象和第一个对象之间就...

铜仁市19788126278: css中的display:inline和float 有什么不同? -
夏美盖三: 如果给一个块定义了float:left,同时有定义了margin-left的话 这个时候需要display:inline,这样做的目的是为了兼容其他浏览器的,反之也一样了 如果每行都重复的话,你就切一个小块的带细线的行做背景,就可以实现了!

铜仁市19788126278: CSS里的display:inline - block会有间隙,怎么解决? -
夏美盖三: <!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body> 未使用font-size:0方法的 使用inline-block出现的间隙的解决方法:父加上样式 font-size:0; 是为的是去掉多余的空白 子元素加上应有的字体样式<div ...

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网