Question

我在我的代码中使用display：inner-block。但是内联块会自动在div之间分配填充，导致浏览器在我的站点中不兼容。任何人都可以指出解决方案。

这里有一个基本参考的小提琴。在这里你可以清楚地看到内部块属性指定的填充

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;
}

此致

Answer 1

内联块不会自动添加边距，它是内联的，这意味着它会注意到每个元素之间的空白区域。即使这可能看起来像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

Answer 2

默认情况下，额外的边距为4px（根据字体大小的父级）。

您可以通过css调整解决此问题。这是我经常使用的解决方案，而且很容易调整这种对齐方式。

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

您可以在此链接上看到更多调整：http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 3

此外，您可以将容器的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/

Answer 4

试试这个：

<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;
}

显示：内联块问题

4 个答案: