在同一行上显示两个div,两者之间没有空格,在div内有contenteditable ="true"

Question

<div id="test" class="pad" contenteditable="true">
  <div id="a" class="fif">text1</div>
  <div id="b" class="fif">text2</div>
</div>  

如上面的代码我有一个contenteditablediv和里面的许多div(子div).子div的数量动态变化,div标签之间的内容也不同.我希望text1和text2(即div标签之间的内容)显示在同一行上,两者之间没有任何空白.此外,contenteditable当我按下ENTER键输入div时,它应该转到下一行.

我尝试float:left但是当我在输入contenteditablediv 时按ENTER键时它不允许我转到下一行.display:inline,span当使用时显示2个div内容之间的空白空间.我试图使用flex从http://www.w3.org/TR/css3-flexbox/但没有得到期望的输出.

Answer 1

只是使<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>

Answer 2

<div>
<div style="display: inline-block;">1</div>
<div style="display: inline-block;">2</div>
</div>

Answer 3

我不确定我完全理解，但这可能会有所帮助：http ://jsfiddle.net/UwZsm/3

.fif {display: inline-block; margin: 0 -4px 0 0;}