Question

我有自制的进度条，沿途有一些步骤。但是，出于某种原因，我的div，text_div，每个元素向右移动约2个像素。我不明白是什么导致这种情况，因为我将边距，填充和边框设置为0.

我很抱歉这个令人困惑的描述，但我认为当你自己看到它时，你会很清楚。尝试将带边div的宽度更改为100px，200px，300px。由于某种原因，每个text_div似乎关闭了大约2px。

.text_div
{
    display: inline-block;
    vertical-align: bottom;
    margin: 0;
    padding: 0;
    border: 0;
}

Answer 1

实际上，这与空白和display:inline-block

的组合有关

请参阅此JSFIDDLE更新，其中我删除了结束div之间的空格。

要解决此问题，您应该使用float和clear

的组合

请参阅此示例： JSFIDDLE

<强> CSS

.text_div
{
    float:left;
    vertical-align: bottom;
    margin: 0;
    padding: 0;
    border: 0;
}

.clearfix {
    clear:both
}

<强> HTML

<div class="text_div" style="margin-left: 100px; width: 50px">asadsadfgdgf asdadaa sad
    <br>|</div>
<div class="text_div" style="margin-left: 50px; width: 50px">asadsadsadas asdadaa sad
    <br>|</div>
<div class="text_div" style="margin-left: 50px; width: 50px">asadsadsadas asdadaa sad
    <br>|</div>
<div class="text_div" style="margin-left: 50px; width: 50px">asadsadsadas asdadaa sad
    <br>|</div>
<div class="clearfix"></div>
<div style="height: 30px; width: 400px; border: 1px solid black;"></div>

Answer 2

<强> Demo

一系列格式化的内联块元素，通常格式化HTML，它们之间会有空格。

HTML

<div class="text_div" style="margin-left: 100px; width: 50px" >
    asadsadfgdgf asdadaa sad
    <br>
    |
</div><div class="text_div" style="margin-left: 50px; width: 50px" >
    asadsadsadas asdadaa sad
    <br>
    |
</div><div class="text_div" style="margin-left: 50px; width: 50px" >
    asadsadsadas asdadaa sad
    <br>
    |
</div><div class="text_div" style="margin-left: 50px; width: 50px" >
    asadsadsadas asdadaa sad
    <br>
    |
</div><div style="height: 30px; width: 400px; border: 1px solid black;">

</div>

Read here for more info

Answer 3

内联块显示元素存在已知问题。内联元素之间的空格，我们用来使我们的标记可读，在这个位置被解释为真正的可见空间。有几种方法可以解决这个问题（请查看css-tricks post）

例如（我喜欢这个，因为它保持标记可读，但可以讨论）：

HTML

<div class="container">
    <div class="text_div" style="margin-left: 100px; width: 50px">asadsadfgdgf asdadaa sad
        <br>|</div>
    <div class="text_div" style="margin-left: 50px; width: 50px">asadsadsadas asdadaa sad
        <br>|</div>
    <div class="text_div" style="margin-left: 50px; width: 50px">asadsadsadas asdadaa sad
        <br>|</div>
    <div class="text_div" style="margin-left: 50px; width: 50px">asadsadsadas asdadaa sad
        <br>|</div>
</div>
<div style="height: 30px; width: 400px; border: 1px solid black;"></div>

CSS

.text_div {
    display: inline-block;
    vertical-align: bottom;
    margin: 0;
    padding: 0;
    border: 0;
    font-size:14px; //now you need to manualy set font-size for your blocks
}

.container {
    font-size: 0px; //this does that trick
}

Answer 4

使用display:inline-block;时，您必须考虑到空白区域。要摆脱这个问题，您可以使用HTML注释转义空格或将元素放在彼此旁边。

选项1：

<div style='display:inline-block;'>inline block</div><!--
--><div style='display:inline-block;'>inline block</div>

选项2：

<div style='display:inline-block;'>
    inline block
</div><div style='display:inline-block;'>
    inline block
</div>

Div没有正确定位边距

4 个答案: