Question

正如您在this fiddle中看到的那样，两个底部div之间有一个空格。我该如何解决此问题？

HTML

<div id="textbox"></div>
<div id="textboxSquare"></div>
<div id="textboxSquare"></div>

CSS

* {
    margin: 0; padding: 0;
}

#textbox {
    border: 1px solid #848484;
    -webkit-border-top-left-radius: 30px;
    -moz-border-radius-topleft: 30px;
    border-top-left-radius: 30px;
    -webkit-border-top-right-radius: 30px;
    -moz-border-radius-topright: 30px;
    border-top-right-radius: 30px;
    outline:0;
    height:25px;
    display: block;
    box-sizing: border-box;
    width: 300px;
    padding-left:20px;
    padding-right:20px;
}

#textboxSquare {
    display:inline-block;
    box-sizing: border-box;
    height:25px; 
    width: 150px;
    border: 1px solid #848484;
}

Answer 1

将所有<div>放在同一行，它就会消失。

这是display: inline-block;

的问题

以下是ya的参考：

http://css-tricks.com/fighting-the-space-between-inline-block-elements/

Fixed your fiddle

看看它甚至没有注意到另一个错误：只使用#ID一次。只有在找到第一个#ID之后才会搜索文档，然后停止。

<div id="textbox"></div>
<div id="textboxSquare"></div>  <!-- This id="" must be unique to all others in the document -->
<div id="textboxSquare"></div>  <!-- This id="" must be unique to all others in the document -->

改为使用班级：http://jsfiddle.net/8B875/4/

这个小提琴也实现了一种使用float: left;属性的不同方法，但如果你走这条路，你将不得不调整其他东西。

Answer 2

添加

float:left;
clear:none;

在#textboxSquare：

中

#textboxSquare {
    display:inline-block;
    box-sizing: border-box;
    height:25px; 
    width: 150px;
    border: 1px solid #848484;
    float:left;
    clear:none;
}

Fiddle

Answer 3

不要使用负边距。

一种很好的战斗方法是字母间距技巧，你可以将它的父div的字母间距设置为0，然后将它在inline-block div中重置为normal

Answer 4

就像说已经不使用重复ID了。但那不是问题。使用已分配display: inline-block;到你的DIV。只需删除此声明，并为这些项添加float:left;。

Answer 5

只需删除HTML中div之间的空格，如下所示：

<div id="textbox"></div>
<div id="textboxSquare"></div><div id="textboxSquare"></div>

或

<div id="textbox"></div>
<div id="textboxSquare"></div><!--
remove this space
--><div id="textboxSquare"></div>

如何删除Div表之间的空格

5 个答案: