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