当两个div元素显示为内联块时如何删除它们之间的空白[重复]

Posted 2023-03-06

【中文标题】当两个div元素显示为内联块时如何删除它们之间的空白[重复]

【英文标题】：How to delete white space between two div element when they display as inline-block [duplicate]

【发布时间】：2014-01-17 04:24:04

【问题描述】：

我想使用inline-block 将两个 div 元素并排放置（就像float:left），但是当我在浏览器中打开页面时，第二个 div 转到下一行，但是当设置中心 div宽度为 79% 或更小。然后它显示在一行中，但是左div和center div之间似乎有大约4px的空间，然后我将两个div的边距设置为0px，结果是一样的。

如果有人知道这件事，请建议我如何解决。提前致谢。

注意：如果我使用float则没有问题，但我需要使用inline-block 代码如下。

css:

<style type="text/css">
#container 
    width: 980px;

#container, #left, #center 
    display: inline-block;

#left 
    width: 20%;

#center 
    width: 80%;

</style>

html:

<div id="container">
    <div id="left">
        left other elements goes here
    </div>
    <div id="center">
        center other elements goes here
    </div>
</div>

【参考方案1】：

最简单的解决方案是删除空格本身

<div id="container"><div id="left">left other elements goes here</div><div id="center">center ther elements goes here</div></div>

【参考方案2】：

inline-block 在元素之间留下white-space。

将元素写在同一行以避免空白。

改变

<div id="left">
    left other elements goes here
</div>
<div id="center">
    center other elements goes here
</div>

到

<div id="left">
    left other elements goes here
</div><div id="center">
    center other elements goes here
</div>

【参考方案3】：

你可以试试这个。

<div id="container"><!--
 --><div id="left">
        left other elements goes here
    </div><!-- 
 --><div id="center">
        center other elements goes here
    </div>
</div>

这样你可以保持适当的缩进

【讨论】：

附注：您可以安全地删除第一条评论。它什么也不做。 ;)

【参考方案4】：

HTML：

 <div id="left">
        left other elements goes here
    </div><div id="center">
        center other elements goes here
    </div>

css:

#container 
    width: 980px;

#container, #left, #center 
    display: inline-block;

#left 
    width: 20%;

#center 
    width: 80%;

【参考方案5】：

哇...已经有很多解决方案了，

你试过display:table...它支持简单的 IE8+ 并且不需要太多的 css 并且你得到了你的目的：

demo

#container 
    width: 980px;
    display:table;


#left, #center 
    display:table-cell;
    border:1px solid #000;

【参考方案6】：

inline-block 保留空白（默认）。

要解决您的问题，请将 div id="left" 的结束标记直接设置在第二个 div 的开始之前。

这是一个工作DEMO

看看

<div id="container">
    <div id="left">
        left other elements goes here
    </div><div id="center">
        &nbsp;center other elements goes here
    </div>
</div>

【参考方案7】：

在您的 css 代码上使用 left:-3px; (;