web-dev-qa-db-ja.com

contenteditable = "true"のdiv内で、間に空白を入れずに同じ行に2つのdivを表示します

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

上記のコードのように、私はcontenteditable divとその中に多くのdiv（子div）を持っています。子divの数は動的に変化し、divタグ間のコンテンツも変化します。が欲しいです text1およびtext2（つまり、divタグ間のコンテンツ）は、間に空白を入れずに同じ行に表示されます。また、contenteditable divと入力しているときに、Enterキーを押すと、次の行に移動するはずです。

私は試した float:leftしかし、contenteditable divと入力しているときにEnterキーを押すと、次の行に移動できません。 display:inline、spanを使用すると、2つのdivコンテンツの間に空白が表示されます。 http://www.w3.org/TR/css3-flexbox/ からflexを使用してみましたが、目的の出力が得られませんでした。

csscss3htmlcontenteditable
8
Vivek Dani

<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>
12
Tim Down
<div>
<div style="display: inline-block;">1</div>
<div style="display: inline-block;">2</div>
</div>
8
websky

ティム・ダウンの実際の問題へのストライキを妨げる答えはなかったので、最初に投稿されてから5年以上後にこの質問に答えました。さらに詳しく説明すると、2つの要素をインラインブロックすると次のようになります。

2つのインラインブロックdiv間の空白が予想されます。要素（この場合はインラインブロック）をインライン化すると、すべての要素を同じ行に並べて配置するようにブラウザーに指示することになります。そうすることで、divが行スペースを共有するため、divを行の空白（スペース/タブなど）と同等に扱うことになります。

スニペットでは、終了divタグの間に4つのスペース文字があります（</div>）そして次のオープニング<div> 鬼ごっこ。ブラウザレンダリングエンジンは、複数のスペースを1つのスペースに縮小し、その1つのスペースが、この場合に観察している余分な文字を占有します。

したがって、上記を理解したら、次のような多くの回避策の1つを採用することで、これを簡単に解決できます。

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

2
Ashwin Prabhu

使用する display:inline内部divの場合

 #test div{
      display:inline;

    }
2
Md Sifatul Islam

上手

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

jsFiddled here

1
Milche Patern

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

完全に理解しているかどうかはわかりませんが、これが役立つ可能性があります： http://jsfiddle.net/UwZsm/

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

私はアイデアをテストしました、そしてそれはあなたが私が信じていることについて話していることのために働きました。

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

お役に立てば幸いです。

0
Shannon Duncan

わかりました。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>
0
MIIB