显示两个div对之间不相同blankspace线，以CONTENTEDITABLE =“真”

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

一个div内如在上面的代码我有一个contenteditable DIV和许多的div它（子的div）的内部。子div的数量动态变化，也是div标签之间的内容。我需要text1和text2（即div标签之间的内容）显示在同一行上，两者之间没有任何空格。同时在contenteditable div中输入，如果我按ENTER键，它应该转到下一行。显示两个div对之间不相同blankspace线，以CONTENTEDITABLE =“真”

我试过float:left但它不允许我在按下ENTER键的同时在contenteditable div中输入时转到下一行。 display:inline,span使用时显示两个div内容之间的空白区域。我尝试使用http://www.w3.org/TR/css3-flexbox/中的flex，但没有得到所需的输出。

来源

2013-03-01 Vivek Dani

起点小提琴：http://jsfiddle.net/UwZsm/ – isherwood 2013-03-01 20:55:31

感谢您的回答，但仍然存在2个class =“fif”之间的空格，我不想要这个空格。 – 2013-03-03 09:32:16

我不知道我完全理解，但是这可能帮助：http://jsfiddle.net/UwZsm/3

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

来源

2013-03-01 20:58:39 isherwood

我打算有这样的东西[http://jsfiddle.net/hari_OM/4GfcJ/2/](http://jsfiddle.net/hari_OM/4GfcJ/2/）。但它不完全是我想要的，因为尽管在class =“fif”的2个子div之间没有看到空白空间，但空白空间存在并且可以在用户注意时退出**，也就是说他也必须擦除2个div之间的额外空格。 – 2013-03-03 10:02:28

好

.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-01 20:59:25

感谢isherwood初始jsFiddle – 2013-03-01 21:00:10

新行问题依然存在 – MIIB 2013-03-01 21:01:06

什么新行问题MIBB？什么是downvote？ – 2013-03-01 21:02:14

我测试出了一个主意，和它的工作为了什么你在说我相信。

<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-01 21:01:59

谢谢4答案，但它不是我想要的。我打算有这样的东西[http://jsfiddle.net/hari_OM/4GfcJ/2/](http://jsfiddle.net/hari_OM/4GfcJ/2/）。但它不完全是我想要的，因为即使在class =“fif”的2个子div之间没有看到空白区域，空白区域仍然存在，并且在退格的时候可以被用户注意到，也就是说，他还必须擦除额外的空白区域在2 divs之间 – 2013-03-03 10:21:19

好吧我想通了，如果你有权访问的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-01 21:09:01 MIIB

感谢您的回答，但空白空间仍然可见。终端用户应该感觉好像“text1”和“text2”属于同一个句子，即使它们可能属于2个不同的div。同时，输入最终用户应该感觉到他正在编辑一个连续的句子，而不是2个不同的句子。 – 2013-03-03 10:15:48

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-14 14:01:40 Sergiu

只是使<div>■找display: inline或display: inline-block并删除HTML源之间的空白。

是否使用inline或inline-block取决于您希望如何布置div内的内容。这是an MDN article on the subject。

演示：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-15 08:32:23

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

来源

2015-03-17 15:34:19 websky

的内格

#test div{ 
     display:inline; 

    }

使用 display:inline

来源

2016-09-19 11:06:43

显示两个div对之间不相同blankspace线，以CONTENTEDITABLE =“真”

回答

相关问题