Fatal编程技术网
  • css/
  • Css 在同一行上显示两个div，中间不留空格，在一个div内显示contenteditable="；“真的”； 文本1 文本2

Css 在同一行上显示两个div，中间不留空格，在一个div内显示contenteditable="；“真的”； 文本1 文本2

css html

Css 在同一行上显示两个div，中间不留空格，在一个div内显示contenteditable="；“真的”； 文本1 文本2,css,html,contenteditable,Css,Html,Contenteditable,在上面的代码中，我有一个contenteditablediv和许多div（子div）。子div的数量会动态变化，div标记之间的内容也会变化。我希望text1和text2（即div标签之间的内容）显示在同一行上，中间没有任何空格。另外，在键入contenteditablediv时，如果我按ENTER键，它应该转到下一行 我尝试了float:left，但当我在contenteditablediv中键入时按ENTER键时，它不允许我转到下一行。display:inline，span使用时显示两个di

在上面的代码中，我有一个
contenteditable
div和许多div（子div）。子div的数量会动态变化，div标记之间的内容也会变化。我希望
text1
和
text2
（即div标签之间的内容）显示在同一行上，中间没有任何空格。另外，在键入
contenteditable
div时，如果我按ENTER键，它应该转到下一行

我尝试了
float:left
，但当我在
contenteditable
div中键入时按ENTER键时，它不允许我转到下一行。
display:inline
，
span
使用时显示两个div内容之间的空白。我尝试从中使用
flex
，但没有获得所需的输出。

我不确定自己是否完全理解，但这可能会有帮助：

嗯

我测试了一个想法，我相信它对你所说的有用

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


测试
.fif{
填充：0px；
浮动：左；
}
文本1
文本2
希望有帮助

好的，如果您有权访问html代码，我就知道了

<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>


文本1
文本2
.pad{
背景色：#eee；
填充：0px；
溢出：隐藏
}
.fif{
显示：内联块；
保证金：0；
填充：0；
}
表，td，tr{
填充：0；
}
#a{
背景色：#ddd；
}
#b{
背景色：#ccc；
}

这里没有任何空间

    <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>


文本1文本2
只需使
具有
display:inline
或
display:inline block
，并在HTML源代码中删除它们之间的空白

使用
inline
还是
inline block
取决于您希望div中的内容如何布局。给你

演示：

CSS:

HTML:


文本1文本2


1.
2.
对内部div使用
显示：inline

<div>
<div style="display: inline-block;">1</div>
<div style="display: inline-block;">2</div>
</div>
这个问题在最初发布5年多后才得到回答，因为除了蒂姆·唐恩（Tim Down）对实际问题的抨击之外，没有任何答案。进一步阐述，以下是内联块两个元素时发生的情况：

两个内联块div之间应为空白。当您内联一个元素（在本例中为内联块）时，您将指示浏览器将所有元素并排放置在同一行上。这样做，您就可以将div等同于行上的空白（空格/制表符等），因为它们共享行空间

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

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

 #test div{
      display:inline;

    }

text1text2
或

text1text2
或

text1text2
最后一个是无效的XML，但浏览器不会对此感到厌烦

您的小提琴与上面的解决方法相结合：

起点小提琴：感谢您的回答，但是，class=“fif”的两个div之间仍然有一个空格，这是我不想要的。感谢isherwood最初的JSFIDdle，新行问题仍然存在，他提到的问题。例如，当您输入文本1并按enter键时，它不会转到“新建”line@MIIB“在输入contenteditable div时，如果我按ENTER键，它应该转到下一行”那么它应该转到下一行吗？正确。应该转到下一行。这就是为什么我很难得到这样的东西。但这并不完全是我想要的，因为即使在class=“fif”的两个子div之间没有空格，但空格仍然存在，并且在用户进行退格时可以被用户注意到，也就是说，他必须在两个子div之间删除一个额外的空格。感谢您的回答，但空格仍然可见。最终用户应该感觉好像“text1”和“文本2“属于同一个句子，即使它们可能属于两个不同的部门。此外，在键入时，最终用户应该感觉到他正在编辑一个连续的句子，而不是两个不同的句子。谢谢4答案，但这不是我想要的。我打算做一些像这样的事情。但这并不完全是我想要的，因为即使在class=“fif”的两个子div之间看不到空格，但空格仍然存在，并且在用户进行退格时可以被用户注意到，也就是说，他必须在两个子div之间删除一个额外的空格 
<div id="test" class="pad" contenteditable="true">
    <div id="a" class="fif">text1</div><div id="b" class="fif">text2</div>
</div>

.fif {
    display: inline; /* Or inline-block */
}

<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>

 #test div{
      display:inline;

    }

<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>