显示：内嵌块问题

我在我的代码中使用display：inner-block。但内联块自动分配之间的填充导致浏览器不兼容在我的网站。任何人都可以指出一个解决方案。显示：内嵌块问题

这里基本reference.Here可以清楚地看到的填充通过内部块属性分配一个小提琴

http://jsfiddle.net/damsarabi/vbhnF/#&togetherjs=4aiQ9gSCpq

这是基本的代码为在小提琴

<div class="LabelColumn">label column</div> 
<div class="DataColumn">data column</div> 


div{ 
border:1px solid #000 
} 

div.LabelColumn 
{ 
    display: inline-block; 
    vertical-align: top; 
}

问候参考，

来源

2013-12-16 Maclean Pinto

行内块不会自动添加余量，它是inl ine，这意味着它需要注意每个元素之间的空白区域。尽管这可能看起来像一个4px左右的边距，但它不是，这是一个单一的空间。一种方法来避开这将是删除空格：

<div class = "LabelColumn">asdfasdf</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div><div class = "LabelColumn">asdfasdf</div><div class = "DataColumn">data</div>

另外，注释掉空白：

<div class = "LabelColumn">asdfasdf</div><!-- 
--><div class = "LabelColumn">asdfasdf</div>

JSFiddle

或者最后，但绝非最不重要的，float:left而不是更改display类型：

JSFiddle

来源

2013-12-16 09:48:24 George

+1：打我吧:) – NoobEditor

我读了这一点。男人我怎么能忘记。用这个浪费了5个小时。谢谢伙伴 –

很高兴已经帮助。 – George

默认情况下，存在4px的额外余量（根据字体大小的父级）。

你可以通过css调整来解决这个问题。这是我经常使用的解决方案，并且它是调整此对齐的简单方法。

div.LabelColumn 
{ 
    display: inline-block; 
    vertical-align: top; 
    margin-right: -4px; 
}

你可以看到这个链接更多的调整：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

来源

2013-12-16 09:50:21 jbr

我推荐阅读上面提到的CSS-Tricks文章 - 我也读过它，它非常有帮助。 +1。 – keaukraine

您也可以设置容器的font-size到0和浮动元素设置必要font-size。这将消除空间。这对于无法避免元素之间出现空白的情况很有用（例如，某些IDE可以配置为自动重新格式化标记）。

div.LabelColumn 
{ 
    font-size:16px; 
    display: inline-block; 
    vertical-align: top; 
    text-align:left; 
    border:1px solid #000; 
} 

.full_width { 
    width:100%; 
    font-size:0; 
}

演示： http://jsfiddle.net/keaukraine/htAR6/2/

来源

2013-12-16 09:59:43 keaukraine

试试这个：

<div class="LabelColumn">label column</div> 
<div class="DataColumn">data column</div> 

div.LabelColumn 
{ 
    font-size:16px; 
    display: inline-block; 
    vertical-align: top; 
    text-align:left; 
    border:1px solid #000; 
} 

.full_width { 
    width:100%; 
    font-size:0; 
}

来源

2013-12-16 10:14:03

显示：内嵌块问题

回答

相关问题