在同一行上显示两个 div，中间没有空格，在一个 div 内，内容可编辑 = "true"

<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标签之间的内容)显示在同一行上，中间没有任何空白。另外，在输入contenteditablediv时，如果我按ENTER键，它应该转到下一行。

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

只要让<div> s有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>

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

回答这个问题已经超过5年了，因为除了蒂姆·唐恩对实际问题的打击之外，没有一个答案。进一步解释一下，下面是内联块两个元素的情况:

两个行内块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/

使用display:inline作为内部div

 #test div{
      display:inline;
    }

.pad {
    background-color: #eee;
    padding: 4px;
    overflow:hidden  /*  first */
}
.fif {
    display: inline-block;
    margin: 0;
    padding: 4px 8px;
    float:left  /* second part */
}

这里的

jsFiddled

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

.fif {display: inline-block; margin: 0 -4px 0 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>

希望有帮助!

如果你有权限访问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>

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>

相关内容

最新更新

热门标签：