<div id="test" class="pad" contenteditable="true">
<div id="a" class="fif">text1</div>
<div id="b" class="fif">text2</div>
</div>
正如上面的代码我有一个contenteditable股利和许多的div里面的（孩子的div）。 孩子的div数动态和也各不相同div标签之间的内容。 我想text1和text2将被显示在同一行（即div标签之间的内容），在不之间的任何空白。 此外，同时在输入contenteditable DIV如果我按回车键就应该到下一行。
我试图float:left ，但它不允许我去到下一行，当我按下ENTER键，而在打字contenteditable格。 display:inline ， span在内容2的div之间使用显示空格时。 我尝试使用flex从http://www.w3.org/TR/css3-flexbox/但没有得到期望的输出。
只是使<div> ■找display: inline或display: inline-block和删除在HTML源它们之间的空白。
无论您使用inline或inline-block取决于你怎么想的div中的内容进行布局。 下面是关于这个问题的MDN文章 。
演示： http://jsfiddle.net/timdown/GVZPX/
CSS：
.fif {
display: inline; /* Or inline-block */
}
HTML：
<div id="test" class="pad" contenteditable="true">
<div id="a" class="fif">text1</div><div id="b" class="fif">text2</div>
</div>
<div>
<div style="display: inline-block;">1</div>
<div style="display: inline-block;">2</div>
</div>
使用display:inline用于内格
#test div{
display:inline;
}
好
.pad {
background-color: #eee;
padding: 4px;
overflow:hidden /* first */
}
.fif {
display: inline-block;
margin: 0;
padding: 4px 8px;
float:left /* second part */
}
这里jsFiddled
接听超过5年后，这是最初发布的，因为没有一个答案禁止添唐氏在实际问题罢工这个问题。 进一步阐述它，这里是当你inline-block的两个元素会发生什么：
两个内嵌的div块之间的空白，预计。 当内联的元件（或内嵌块在这种情况下），则在影响指示浏览器把由上侧的同一行侧的所有元素。 通过这样做，你是在为影响他们共享行空间处理您的div相当于上线（空间/标签等）的白空间。
在你的代码段，你必须关闭div标签（4个之间的空格字符</div>和下一个开放<div>标签。 浏览器渲染引擎缩小多个空格成一个单一的空间和单一的空间占用多余的字符是你在这种情况下，在观察什么。
所以，一旦你理解了上面，你可以很容易地通过采用许多类似的解决方法之一解决这个问题：
<div id="a" class="fif">text1</div><!--
--><div id="b" class="fif">text2</div>
要么
<div id="a" class="fif">text1</div
><div id="b" class="fif">text2</div>
要么
<div id="a" class="fif">text1</
div><div id="b" class="fif">text2</
div>
最后一个是无效的XML，但是浏览器不要在这个BARF。
你拨弄分叉这里与上述的变通办法： http://jsfiddle.net/AshwinPrabhuB/otavbncr/1/
我不知道我完全理解，但是这可能帮助： http://jsfiddle.net/UwZsm/3
.fif {display: inline-block; margin: 0 -4px 0 0;}
我测试了一个想法，和它的工作对你说些什么，我相信。
<html>
<head>
<title>test</title>
<style>
.fif{
padding:0px;
float:left;
}
</style>
</head>
<body>
<div id="test" class="pad" contenteditable="true">
<div id="a" class="fif">text1</div>
<div id="b" class="fif">text2</div>
</div>
</body>
</html>
希望帮助！
好吧，我看着办吧，如果你有机会获得的HTML代码。
<div id="test" class="pad" contenteditable="true">
<table>
<tr>
<td>
<div id="a" class="fif">text1</div>
</td>
<td>
<div id="b" class="fif">text2</div>
</td>
</tr>
</table>
</div>
<style>
.pad {
background-color: #eee;
padding: 0px;
overflow:hidden
}
.fif {
display: inline-block;
margin: 0;
padding: 0;
}
table,td,tr{
padding:0;
}
#a {
background-color: #ddd;
}
#b {
background-color: #ccc;
}
</style>
http://jsfiddle.net/hari_OM/4GfcJ/2/
这是一个没有任何空间。
<div id="test" class="pad" contenteditable="true">
<div id="a" class="fif">text1</div><div id="b" class="fif">text2</div>
</div>
