Html 在 contenteditable="true" 的 div 内，在同一行上显示两个 div，中间没有空格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15166673/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display two divs on same line without blankspace in between, inside a div with contenteditable="true"
提问by Vivek Dani
<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 contenteditablediv and many divs inside it (child divs). Number of child divs vary dynamically and also the content between div tags. I want text1and text2(i.e. content between div tags) to be displayed on same line, without any blank space in between. Also while typing in contenteditablediv if I press ENTER key it should go to next line.
在上面的代码中，我有一个contenteditablediv 和其中的许多 div（子 div）。子 div 的数量以及 div 标签之间的内容动态变化。我希望text1和text2（即 div 标签之间的内容）显示在同一行上，中间没有任何空格。同样在输入contenteditablediv 时，如果我按 ENTER 键，它应该转到下一行。
I tried float:leftbut it does not allow me to go to the next line when I press ENTER key while typing in contenteditablediv. display:inline, spanwhen used show blank space in between 2 div contents. I tried using flexfrom http://www.w3.org/TR/css3-flexbox/but didn't get desired output.
我试过了，float:left但是当我在输入contenteditablediv时按 ENTER 键时，它不允许我转到下一行。display:inline,span使用时在 2 个 div 内容之间显示空格。我尝试flex从http://www.w3.org/TR/css3-flexbox/使用，但没有得到所需的输出。
回答by Tim Down
Just make the <div>s have display: inlineor display: inline-blockand remove the white space between them in the HTML source.
只需在 HTML 源代码中使<div>s 具有display: inlineordisplay: inline-block并删除它们之间的空白即可。
Whether you use inlineor inline-blockdepends on how you want content within the divs to be laid out. Here's an MDN article on the subject.
您是否使用inline或inline-block取决于您希望如何布置 div 中的内容。这是关于该主题的 MDN 文章。
Demo: http://jsfiddle.net/timdown/GVZPX/
演示：http: //jsfiddle.net/timdown/GVZPX/
CSS:
CSS：
.fif {
display: inline; /* Or inline-block */
}
HTML:
HTML：
<div id="test" class="pad" contenteditable="true">
<div id="a" class="fif">text1</div><div id="b" class="fif">text2</div>
</div>
回答by websky
<div>
<div style="display: inline-block;">1</div>
<div style="display: inline-block;">2</div>
</div>
回答by Md Sifatul Islam
use display:inlinefor the inner div
使用display:inline了内部的div
#test div{
display:inline;
}
回答by Ashwin Prabhu
Answering this question more than 5 years after it was originally posted, since none of the answers barring Tim Down's strike at the actual problem. Elaborating it further, here is what happens when you inline-block two elements:
在最初发布这个问题 5 年多之后才回答这个问题，因为没有一个答案能阻止 Tim Down 对实际问题的打击。进一步详细说明，当您内联块两个元素时会发生以下情况：
The white space between the two inline block divs is expected. When you inline an element (or inline-block in this case), you are in affect instructing the browser to put all the elements on the same line side by side. By doing so, you are in affect treating your divs equivalent to the white-spaces on the line (space/tab etc) as they share the line space.
两个内联块 div 之间的空白是预期的。当您内联一个元素（或本例中的内联块）时，您实际上是在指示浏览器将所有元素并排放置在同一行上。通过这样做，您可以将 div 等同于行上的空格（空格/制表符等），因为它们共享行空间。
In your snippet, you have 4 space characters between the closing div tag (</div>) and the next opening <div>tag. Browser rendering engine shrinks multiple spaces into a single space and that single space takes up the extra character which is what you are observing in this case.
在您的代码段中，结束 div 标签 ( </div>) 和下一个开始<div>标签之间有 4 个空格字符。浏览器渲染引擎将多个空格缩小为一个空格，并且该单个空格占用了额外的字符，这就是您在这种情况下所观察到的。
So, once you understand the above, you can easily solve this by adopting one of the many workarounds like:
因此，一旦您了解了上述内容，您就可以通过采用以下多种解决方法之一轻松解决此问题：
<div id="a" class="fif">text1</div><!--
--><div id="b" class="fif">text2</div>
or
或者
<div id="a" class="fif">text1</div
><div id="b" class="fif">text2</div>
or
或者
<div id="a" class="fif">text1</
div><div id="b" class="fif">text2</
div>
The last one is a invalid XML, but browsers do not barf at this.
最后一个是无效的 XML，但浏览器不会对此感到厌烦。
Your fiddle is forked with the above workarounds here: http://jsfiddle.net/AshwinPrabhuB/otavbncr/1/
您的小提琴与上述解决方法分叉：http: //jsfiddle.net/AshwinPrabhuB/otavbncr/1/
回答by Milche Patern
Well
好
.pad {
background-color: #eee;
padding: 4px;
overflow:hidden /* first */
}
.fif {
display: inline-block;
margin: 0;
padding: 4px 8px;
float:left /* second part */
}
回答by Shannon Duncan
I tested out an idea, and it worked for what you are talking about I believe.
我测试了一个想法，我相信它适用于您所谈论的内容。
<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>
Hope that helps!
希望有帮助！
回答by MIIB
Ok I figure it out if you have access to the html code.
好的，我知道您是否可以访问 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>
回答by Sergiu
http://jsfiddle.net/hari_OM/4GfcJ/2/
http://jsfiddle.net/hari_OM/4GfcJ/2/
Here it is without any space.
这里没有任何空间。
<div id="test" class="pad" contenteditable="true">
<div id="a" class="fif">text1</div><div id="b" class="fif">text2</div>
</div>
回答by isherwood
I'm not sure I fully understand, but this might help: http://jsfiddle.net/UwZsm/3
我不确定我是否完全理解，但这可能会有所帮助：http: //jsfiddle.net/UwZsm/3
.fif {display: inline-block; margin: 0 -4px 0 0;}
