Afficher deux divs sur la même ligne sans blankspace entre les deux, à l'intérieur d'un div avec contenteditable=“true”

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

Comme dans le code ci-dessus, j'ai un contenteditable div et de nombreuses divisions à l'intérieur de l'enfant (divs). Nombre d'enfants divs varier dynamiquement et également le contenu entre les balises div. Je veux text1 et text2 (c'est à dire le contenu entre les balises div) à afficher sur la même ligne, sans aucun espace vide entre les deux. Aussi lors de la saisie dans contenteditable div si j'appuyez sur la touche ENTRÉE, il devrait aller à la ligne suivante.

J'ai essayé float:left mais il ne me permet pas d'aller à la ligne suivante quand j'ai appuyer sur la touche ENTRÉE lors de la saisie dans contenteditable div. display:inline, span lorsque utilisé spectacle de l'espace vide entre les 2 div de contenu. J'ai essayé d'utiliser flex de http://www.w3.org/TR/css3-flexbox/ mais n'a pas obtenu de sortie souhaité.

Point de départ de violon: jsfiddle.net/UwZsm
Merci pour la réponse mais, là encore, il reste un espace vide entre les 2 balises div de class="fif", dont je ne veux pas.

OriginalL'auteur Vivek Dani | 2013-03-01

8

Il suffit de faire le <div>s ont display: inline ou display: inline-block et supprimer l'espace blanc entre eux dans la source HTML.

Si vous utilisez inline ou inline-block dépend de la façon dont vous voulez que le contenu à l'intérieur de la balise div à être aménagé. Voici un MDN article sur le sujet.

Démo: 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>
```
OriginalL'auteur Tim Down

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

OriginalL'auteur websky

2

utilisation display:inline pour l'intérieur div
```
 #test div{
      display:inline;

    }
```
OriginalL'auteur Md Sifatul Islam
1

De répondre à cette question plus de 5 ans après il a été posté, car aucune des réponses sauf Tim Bas de la grève au problème réel. L'élaboration d'elle, voici ce qui se passe quand vous inline-block deux éléments:

L'espace blanc entre les deux inline block divs est prévu. Lorsque vous inline un élément (ou inline-block dans ce cas), vous êtes en affecter demandant au navigateur de mettre tous les éléments sur la même ligne de côte à côte. En procédant ainsi, vous êtes en affecter le traitement de votre divs équivalente à le blanc-espaces sur la ligne (espace, tabulation, etc), car ils partagent la ligne de l'espace.

Dans votre extrait de code, vous disposez de 4 caractères d'espace entre la fermeture de balise div (</div>) et la prochaine ouverture <div> tag. Navigateur moteur de rendu se rétrécit espaces multiples dans un seul espace et que l'espace prend le caractère supplémentaire qui est ce que vous observez dans ce cas.

Donc, une fois que vous comprenez ci-dessus, vous pouvez facilement résoudre ce problème en adoptant l'une des nombreuses solutions comme:
```
<div id="a" class="fif">text1</div><div id="b" class="fif">text2</div>
```
ou
```
<div id="a" class="fif">text1</div
><div id="b" class="fif">text2</div>
```
ou
```
<div id="a" class="fif">text1</
div><div id="b" class="fif">text2</
div>
```
Le dernier est un fichier XML non valide, mais les navigateurs ne pas barf.

Votre violon est fourchue avec les solutions ci-dessus ici: http://jsfiddle.net/AshwinPrabhuB/otavbncr/1/

OriginalL'auteur Ashwin Prabhu
0

Je ne suis pas sûr que je comprends parfaitement, mais cela peut vous aider: http://jsfiddle.net/UwZsm/3
```
.fif {display: inline-block; margin: 0 -4px 0 0;}
```
J'ai l'intention d'avoir quelque chose qui s'affiche comme ceci http://jsfiddle.net/hari_OM/4GfcJ/2/ . Mais ce n'est pas exactement ce que je veux car, même si aucun espace vide entre 2 enfant balise div de class="fif", espace vide existe et peut être remarqué par l'utilisateur, alors qu'il n' retour arrière c'est à dire qu'il faut aussi effacer un supplément de blankspace entre les 2 divs.

OriginalL'auteur isherwood
0

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

Grâce à isherwood pour la première jsFiddle
La nouvelle ligne problème existe toujours
Ce nouveau problème de lignes MIBB ? Et quel est le downvote ??
Celui qu'il a mentionné. Lorsque vous êtes par exemple o le texte 1 et que vous appuyez sur entrée, il ne va pas à la ligne
lors de la saisie dans contenteditable div si j'appuyez sur la touche ENTRÉE, il devrait aller à la ligne suivante" donc, est-il CENSÉ aller à la ligne suivante ?

OriginalL'auteur Milche Patern
0

J'ai testé à partir d'une idée, et il a travaillé pour ce dont vous parlez, je crois.
```
<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>
```
Espère que ça aide!

grâce 4 réponse, mais ce n'est pas ce que je veux. J'ai l'intention d'avoir quelque chose qui s'affiche comme ceci http://jsfiddle.net/hari_OM/4GfcJ/2/ . Mais ce n'est pas exactement ce que je veux car, même si aucun espace vide entre 2 enfant balise div de class="fif", espace vide existe et peut être remarqué par l'utilisateur, alors qu'il ne la touche retour arrière c'est à dire qu'il faut aussi effacer un supplément de blankspace entre les 2 divs

OriginalL'auteur Shannon Duncan

Ok je l'ai trouver si vous avez accès au code 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>

Merci pour la réponse, mais vide de l'espace est encore visible.L'utilisateur final doit se sentir comme si "texte1" et "texte2" appartiennent à la même phrase, même si elles appartiennent à 2 divs. Aussi tout en tapant l'utilisateur final doit se sentir comme si il est de la modification d'un seul tenant de la phrase et non pas 2 distinctes.

OriginalL'auteur MIIB

http://jsfiddle.net/hari_OM/4GfcJ/2/

Ici, c'est sans aucun espace.

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

OriginalL'auteur Sergiu

Vous devez vous connecter pour publier un commentaire.