Fatal编程技术网
  • html/
  • Html div未正确定位并留有边距

Html div未正确定位并留有边距

html css

Html div未正确定位并留有边距,html,css,Html,Css,我有自己制作的progressbar，沿途有一些步骤。但是，由于某些原因，我的div text_div会为每个元素向右移动大约2个像素。我不明白是什么导致了这种情况，因为我将边距、填充和边框设置为0 我很抱歉让人困惑，但我想当你们自己看到它的时候，你们就会明白了。尝试将带边框的div的宽度更改为100px、200px、300px。由于某种原因，每个文本分区似乎都关闭了大约2px 实际上，这与空白和显示：内联块的组合有关 请参阅此更新，其中删除了结束div之间的空格 要解决此问题，您应该结合使用

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

我很抱歉让人困惑，但我想当你们自己看到它的时候，你们就会明白了。尝试将带边框的div的宽度更改为100px、200px、300px。由于某种原因，每个文本分区似乎都关闭了大约2px

实际上，这与空白和显示：内联块的组合有关

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

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

请参见此示例：

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>

asadadfgdgf asdadaa sad

|
Asadsadas asdadaa sad

|
Asadsadas asdadaa sad

|
Asadsadas asdadaa sad

|
这实际上与空白和显示的组合有关：内联块

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

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

请参见此示例：

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>

asadadfgdgf asdadaa sad

|
Asadsadas asdadaa sad

|
Asadsadas asdadaa sad

|
Asadsadas asdadaa sad

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

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

html

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

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

html

使用
显示时：内联块您必须考虑空白。为了解决这个问题，您可以使用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>




内联块
内联块

使用
显示时：内联块您必须考虑空白。为了解决这个问题，您可以使用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>




内联块
内联块


一系列像通常格式化HTML一样格式化的内联块元素之间将有空格

html



asadsadfgdgf asdadaa sad


|
Asadsadas asdadaa sad


|
Asadsadas asdadaa sad


|
Asadsadas asdadaa sad


|




一系列像通常格式化HTML一样格式化的内联块元素之间将有空格

html



asadsadfgdgf asdadaa sad


|
Asadsadas asdadaa sad


|
Asadsadas asdadaa sad


|
Asadsadas asdadaa sad


|



此应答器的唯一问题是垂直对齐不能与浮点对齐。有没有办法解决这个问题？我通过使用display inline和文本元素解决了这个问题。text_div的字体大小为：0和span字体大小为12。我只是想为您解决一个问题-很高兴您解决了它：-）此Answer的唯一问题是垂直对齐不能与浮点对齐。有没有办法解决这个问题？我通过使用display inline和文本元素解决了这个问题。text\u div的字体大小为：0和span font size 12。我只是想为您解决一个问题-很高兴您解决了它：-）