在同一行上显示两个div，两者之间没有空格，在div中包含contenteditable =" true" [英] Display two divs on same line without blankspace in between, inside a div with contenteditable="true"

问题描述

 < div id =testclass =padcontenteditable =true> 
< div id =aclass =fif> text1< / div> 
< div id =bclass =fif> text2< / div> 
< / div> 
  

如上面的代码，我有一个 contenteditable div和其中的许多div（子div）。子div的数量动态变化，以及div标记之间的内容。我想要在同一行显示 text1 和 text2 （即div标签之间的内容），没有任何空格之间。在输入 contenteditable div，如果我按ENTER键，它应该去下一行。

c $ c> float：left 但它不允许我在输入 contenteditable div时按ENTER键进入下一行。 display：inline ， span 时显示两个div内容之间的空格。我尝试使用来自 http：//的 flex www.w3.org/TR/css3-flexbox/ ，但没有得到所需的输出。

解决方案

使< div> 具有 display：inline 或 display：inline-block 并删除HTML源代码之间的空格。

是否使用 inline 或 inline-block 取决于您希望如何布置div中的内容。以下是关于此主题的MDN文章。 p>

演示： http://jsfiddle.net/timdown/ GVZPX /

CSS：

  .fif { 
 display：inline; / *或inline-block * / 
} 
  

HTML：

 < div id =testclass =padcontenteditable =true> 
< div id =aclass =fif> text1< / div>< div id =bclass =fif> text2< / div& 
< / div> 
  

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

As in above code I have a contenteditable div and many divs inside it (child divs). Number of child divs vary dynamically and also the content between div tags. I want text1 and text2 (i.e. content between div tags) to be displayed on same line, without any blank space in between. Also while typing in contenteditable div if I press ENTER key it should go to next line.

I tried float:left but it does not allow me to go to the next line when I press ENTER key while typing in contenteditable div. display:inline, span when used show blank space in between 2 div contents. I tried using flex from http://www.w3.org/TR/css3-flexbox/ but didn't get desired output.

解决方案

Just make the <div>s have display: inline or display: inline-block and remove the white space between them in the HTML source.

Whether you use inline or inline-block depends on how you want content within the divs to be laid out. Here's an MDN article on the subject.

Demo: 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中包含contenteditable =" true"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！