inline-block - 腾讯云开发者社区

文章/答案/技术大牛

发布

display:inline-block

1.块在一行显示 2.行内属性标签支持宽高 3.没有宽度的时候内容撑开宽度 4.标签之间的换行被解析(问题) 5.Ie6 7不支持inline-block(问题) display: none和visibility

9273 0

inline-block清除空隙2

最近做移动端页面时，经常会用到inline-block元素来布局，但无可避免都会遇到一个问题，就是inline-block元素之间的间隙。...对于inline-block元素及去掉间隙的方法，在这里做一个简单的总结。...inline-block是什么 inline-block 即内联块,在CSS的元素分类中可以分成三种：行内元素或者内联元素、块级元素、以及内联块元素。...的value值为inline-block来将其定义为内联块。...inline-block的元素，在IE7及以下浏览器下这俩元素间出现间隙；其它浏览器任何情况下均出现间隙；回到顶部 inline-block元素间隙由来在例子1中，定义为inline-block

2891 0

您找到你想要的搜索结果了吗？

是的

没有找到

css中的inline-block

div { display: inline-block; *display: inline; *zoom: 1; } Basic Support包含值：none | inline | block | list-item...| inline-block table系包含值：table | inline-table | table-caption | table-cell | table-row | table-row-group...| table-column | table-column-group | table-footer-group | table-header-group IE6,7只支持inline元素设置为inline-block

7224 0

block、inline和inline-block

block、inline和inline-block 行内元素和块级元素 block inline inline-block 行内元素和块级元素的区别常见用法 display 举个栗子 ---- 行内元素和块级元素...---- inline-block 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。...比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。...(4)display：inline-block；可以让元素具有块级元素和行内元素的特性：既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。 ---- 举个栗子 <!...将块级元素转换成内联元素*/ ul li{ line-height: 50px; /*与height设为一致则字体垂直居中显示*/ width: 80px; display: inline-block

1.1K2 0

inline-block 布局写法示例

important; // 让空格，tab，回车之类空白的不占空间 } .ly__item { display: inline-block; vertical-align: top; font-size...important; text-align: center; } .ly__item { display: inline-block; vertical-align: top; font-size...important; text-align: justify; } .ly:after { content: ''; width: 100%; display: inline-block...; } .ly__item { display: inline-block; vertical-align: top; font-size: medium; } 注意：如果元素之间如果没有空格...; } .ly__item { display: inline-block; vertical-align: middle; font-size: medium; }

8132 0

block，inline,inline-block的区别

但width、height属性对他们仍有效；注意：IE（低版本IE，IE8及以上支持）本来是不支持inline-block的，所以在IE中对内联元素使用display:inline-block，理论上...IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。...那么如何让IE低版本支持inline-block呢？...bug，如果先定义了display:inline-block，然后再将display设回 inline或block，layout不会消失）。...代码如下： div{ display:inline-block; zoom:1; } 常见的块级元素：div、p、form、h1-h6、pre、ol、ul、dl等等；常见的内联元素：span

1.6K8 0

HTML元素分类：inline、inline-block、block

三者可以互相转化——设置display属性值：inline、inline-block、block inline textarea、span、a、img、input、select 　行内元素特征...而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。...但是父元素内元素如果设置了display：inline-block，则对父元素设置一些定位属性会影响到子元素。（这还是因为浮动元素脱离文档流的关系）。...这也是我倾向于inline-block的主要原因。 4、空白（Whitespace）：inline-block包含html空白节点。...如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴.

2K4 0

display:inline、block、inline-block的区别

inline-block的元素特点：　　将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。...，IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。...从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。...IE下块元素如何实现display:inline-block的效果？　　...代码如下（...为省略的其他属性内容）：　　div {display:inline-block;...}

1.4K1 0

去除inline-block元素间间距

我们先来看一段代码 div{width:900px;} div a{ display:inline-block; width:300px;} ...例如 div{width:900px;} div a{ display:inline-block; width:300px;} <a href...webkit-text-size-adjust:none; 例如 div{width:900px;font-size:0px;-webkit-text-size-adjust:none;} div a{ display:inline-block

7034 0

cssjshtml css之display:inline-block布局

两个图可以看出，display：inline-block后块级元素能够在同一行显示，有人这说不就像浮动一样吗。...没错，display：inline-block的效果几乎和浮动一样，但也有不同，接下来讲一下inline-block和浮动的比较。... b.相同之处：能在某程度上达到一样的效果　　我们先来看看这两种布局：图一：display：inline-block ?...c.浏览器兼容性：ie6/7是不兼容 display：inline-block的所以要额外处理一下：　　在ie6/7下：　　对于行内元素直接使用{dislplay:inline-block;}...b.对于浮动布局就用于需要文字环绕的时候，毕竟这才是浮动真正的用武之地，水平排列的是就交给inline-block了。作者：Ry-yuan

1.4K2 0

inline-block空格间距问题的解决

一、现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子： ?...间距就来了~~ 我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题： .space a { display: inline-block;...2、使用margin负值 .space a { display: inline-block; margin-right: -3px; } ?...; zoom: 1; *display: inline; /* IE inline-block */ letter-spacing: normal; word-spacing...: normal; vertical-align: top; } 以下是一个名叫RayM的人提供的方法： li { display:inline-block; background

1.2K3 0

清除inline-block元素之间的空白

一个元素如果被设置为display：inline-block，那么这个元素将表现为行内块的性质。....wrapper { letter-spacing: -4px; /* 修正Safari */ } } 另外，IE6,7并没有inline-block...} .wrapper{font-size: 0;*word-spacing: -1px;} .il{border:1px solid #000000;display:inline-block...#000000;width:80px;height:100px;word-spacing: normal;letter-spacing:normal;background:#d0e9c6;display: inline-block

1.1K5 0

CSS基础：block，inline和inline-block

css的display属性是前端开发中非常常见的属性，本文简单介绍下其中比较常用的属性值，即block、inline和inline-block。...3. inline-block类型 CSS还提供了一种inline-block盒模型，这种盒模型时inline模型和block模型的综合体：inline-block盒模型的元素不会占据一行，同时也支持width...比如可以给一个link（元素)inline-block属性，使其既有block的宽度高度特性、又具有inline的可同行性。...兼容性问题：IE6、IE7不支持inline-block，所以在IE中对内联元素使用display：inline-block理论上IE是不识别的，但会在IE下触发layout，从而使内联元素拥有了display...：inline-block属性的表象。

6.5K106 1

display:inline-block的深入理解 BY blank

-moz-inline-box和inline-block形似，为什么是“形似”而不是“神似”呢？...或许有朋友会对上面所说的IE也不支持display:inline-block属性，表示疑问或者反对。...其实不然，在IE中对内联元素使用display:inline-block，IE是不识别的，但使用display:inline-block在IE下会触发layout（如果你对layout感觉到陌生，可以参看...从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。...延伸一个问题：IE下块元素如何实现display:inline-block的效果？

1.2K9 0

CSS 消除 inline-block 元素间的间隙

关于什么是 inline-block 元素间的间隙，我们先来看个简单的例子#left { background-color: coral; display: inline-block; width...:100px; height:100px;}#center { background-color: lightblue; display: inline-block; width:100px;...height:100px;}#right { background-color: khaki; display: inline-block; width:100px; height:100px;...left">left center right从上图的运行结果可以看到，添加 display: inline-block

1.8K4 0

浅析inline-block--使用inline-block创建布局

inline-block前端程序猿们肯定不陌生，它是display属性的一个取值。　　之所以称之为inline-block。...他们的性质同设置了display:inline-block的元素一致。上述六个标签在现代浏览器中即为天生的inline-block元素。　　...而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。...这也是我倾向于inline-block的主要原因。空白（Whitespace）：inline-block包含html空白节点。...可参照去除inline-block元素间间距的N种方法。

1.3K7 0

display:inline-block空隙解决方法及原因

normal; /* IE < 8 重置 */ word-spacing: -0.43em; /* IE < 8 && gecko */ } .yui3-u { display: inline-block...; zoom: 1; *display: inline; /* IE inline-block */ letter-spacing: normal; word-spacing...--方法②--> li { display:inline-block; background: orange; padding:10px; word-spacing:0;

4871 0

应不应该使用inline-block代替float

之前的几个站点上，有展示一系列照片的需求，我就用inline-block代替了浮动。 inline-block是什么？ Inline-block是元素display属性的一个值。...而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。当然，周围元素不会环绕这个元素，你也不可能通过清除inline-block就让一个元素跑到下面去。...这也是我倾向于inline-block的主要原因。空白（Whitespace）：inline-block包含html空白节点。...使用inline-block：当你需要控制元素的垂直对齐跟水平排列时，使用inline-block。...inline-block导航另一种inline-block的适用场景：横向导航栏。通常，我们一般会设置a元素display：block然后进行浮动来制作。

1.7K1 0

去除inline-block元素间间距的N种方法

一、现象描述真正意义上的inline-block水平呈现的元素间，换行显示或空格分隔的情况下会有间距，很简单的个例子：间距就来了~...~ 我们使用CSS更改非inline-block水平元素为inline-block水平，也会有该问题： .space a { display: inline-block; padding...三、使用margin负值 .space a { display: inline-block; margin-right: -3px; } margin负值的大小与上下文的字体和文字大小相关...，其中，间距对应大小值可以参见我之前“基于display:inline-block的列表布局”一文part 6的统计表格：例如，对于12像素大小的上下文，Arial字体的margin...a { font-size: 12px; } 这个方法，基本上可以解决大部分浏览器下inline-block元素之间的间距(IE7等浏览器有时候会有1像素的间距)。

3381 0

去除inline-block元素间间距的解决方法

outside none; padding: 10px; background: green; text-align: center; } ul li { display: inline-block...; * display: inline; zoom: 1; background: orange; padding: 5px; } 上面的demo效果，明显的可以看出，在inline-block

8053 0

点击加载更多

display:inline-block

inline-block清除空隙2

css中的inline-block

block、inline和inline-block

inline-block 布局写法示例

block，inline,inline-block的区别

HTML元素分类：inline、inline-block、block

display:inline、block、inline-block的区别

去除inline-block元素间间距

cssjshtml css之display:inline-block布局

inline-block空格间距问题的解决

清除inline-block元素之间的空白

CSS基础：block，inline和inline-block

display:inline-block的深入理解 BY blank

CSS 消除 inline-block 元素间的间隙

浅析inline-block--使用inline-block创建布局

display:inline-block空隙解决方法及原因

应不应该使用inline-block代替float

去除inline-block元素间间距的N种方法

去除inline-block元素间间距的解决方法

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐