9 
<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 标签之间的内容动态变化。我希望text1and text2（即 div 标签之间的内容）显示在同一行，中间没有任何空格。同样，在输入contenteditablediv 时，如果我按 ENTER 键，它应该转到下一行。

我试过了，但是当我在输入divfloat:left时按 ENTER 键时，它不允许我转到下一行。,使用时在 2 个 div 内容之间显示空白。我尝试使用http://www.w3.org/TR/css3-flexbox/但没有得到想要的输出。contenteditabledisplay:inlinespanflex

4

9 回答 9

14

只需在 HTML 源代码中使<div>s 具有display: inlineordisplay: inline-block并删除它们之间的空格。

是否使用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>
于 2013-08-15T08:32:23.357 回答
10 
<div>
  <div style="display: inline-block;">1</div>
  <div style="display: inline-block;">2</div>
</div>
于 2015-03-17T15:34:19.977 回答
2

在最初发布该问题 5 年多后回答这个问题，因为没有任何答案可以排除 Tim Down 对实际问题的攻击。进一步详细说明，当您内联阻止两个元素时会发生以下情况：

两个内联块 div 之间的空白是预期的。当您内联一个元素（或在这种情况下为内联块）时，您会影响到指示浏览器将所有元素并排放置在同一行上。通过这样做，您会影响将您的 div 视为等同于行上的空格（空格/制表符等），因为它们共享行空间。

在您的代码段中，结束 div 标记 ( </div>) 和下一个开始<div>标记之间有 4 个空格字符。浏览器渲染引擎将多个空格缩小为一个空格，并且该单个空格占用了您在本例中观察到的额外字符。

因此，一旦您了解了上述内容，您就可以通过采用以下众多解决方法之一轻松解决此问题：

<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，但浏览器不会对此感到厌烦。

您的小提琴在这里与上述解决方法分叉：http: //jsfiddle.net/AshwinPrabhuB/otavbncr/1/

于 2019-02-12T08:54:59.467 回答
2

用于display:inline内部 div

 #test div{
      display:inline;

    }
于 2016-09-19T11:06:43.020 回答
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

于 2013-03-01T20:59:25.503 回答
0

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

.fif {display: inline-block; margin: 0 -4px 0 0;}
于 2013-03-01T20:58:39.953 回答
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>

希望有帮助！

于 2013-03-01T21:01:59.903 回答
0

好的，我知道您是否可以访问 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>
于 2013-03-01T21:09:01.003 回答
0

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>
于 2013-08-14T14:01:40.980 回答