Anzeige zwei divs auf die gleiche Linie ohne blankspace in zwischen, innerhalb eines div mit contenteditable="true"
<div id="test" class="pad" contenteditable="true">
<div id="a" class="fif">text1</div>
<div id="b" class="fif">text2</div>
</div>
Wie im obigen code habe ich eine contenteditable
div und viele divs drin (child-divs). Anzahl von child-divs dynamisch variieren und auch den Inhalt zwischen die div-tags. Ich will text1
und text2
(d.h. Inhalt zwischen die div-tags) werden angezeigt auf der gleichen Zeile, ohne Leerzeichen dazwischen. Auch während der Eingabe in contenteditable
div, wenn ich drücken Sie die ENTER-Taste, es sollte mit der nächsten Zeile.
Versuchte ich float:left
aber es hat mir nicht erlauben, gehen Sie auf die nächste Zeile, wenn ich drücken Sie die ENTER-Taste während der Eingabe in contenteditable
div. display:inline
, span
wenn verwendet, zeigen leere Raum zwischen 2 div-Inhalt. Ich habe versucht, mit flex
aus http://www.w3.org/TR/css3-flexbox/ aber nicht den gewünschten Ausgang.
Vielen Dank für die Antwort, aber dennoch bleibt es eine Leerstelle zwischen 2 divs class="fif", die ich nicht will.
InformationsquelleAutor Vivek Dani | 2013-03-01
Du musst angemeldet sein, um einen Kommentar abzugeben.
Machen nur die
<div>
s habendisplay: inline
oderdisplay: inline-block
und entfernen Sie den weißen Raum zwischen Ihnen in der HTML-Quelle.Ob Sie
inline
oderinline-block
hängt davon ab, wie Sie Inhalt in die divs angelegt werden. Hier ist eine MDN-Artikel zum Thema.Demo: http://jsfiddle.net/timdown/GVZPX/
CSS:
HTML:
InformationsquelleAutor Tim Down
InformationsquelleAutor websky
verwenden
display:inline
für das innere divInformationsquelleAutor Md Sifatul Islam
Beantwortung dieser Frage mehr als 5 Jahre nach es wurde ursprünglich geschrieben, da keine Antworten abgesehen von Tim das Down-Streik am eigentlichen problem. Ausarbeitung es weiter, hier ist, was passiert, wenn man inline-block zwei Elemente:
Den weißen Raum zwischen den beiden inline-block-divs zu erwarten ist. Wenn Sie ein inline-element (inline-block in diesem Fall), sind Sie in der Wirkung, wie er den browser, um alle Elemente auf der gleichen Zeile nebeneinander. Indem Sie dies tun, Sie beeinflussen Sie die Behandlung Ihrer divs entspricht dem white-spaces auf der Linie (space/tab usw) wie teilen Sie die Linie Raum.
In Ihrem snippet, Sie haben 4 Leerzeichen zwischen dem schließenden div-tag (
</div>
) und die nächste Eröffnung<div>
tag. Browser-rendering-engine schrumpft mehrere Leerzeichen in ein einzelnes Leerzeichen und das Leerzeichen nimmt die extra-Charakter das ist, was man beobachtet in diesem Fall.So, wenn Sie verstehen, die oben, können Sie ganz einfach lösen, indem die eine der vielen workarounds wie:
oder
oder
Der Letzte ist ein Ungültiger XML-Code, aber Browser nicht barf an.
Ihre Geige ist gabelförmig mit den oben genannten workarounds hier: http://jsfiddle.net/AshwinPrabhuB/otavbncr/1/
InformationsquelleAutor Ashwin Prabhu
Ich bin mir nicht sicher, ob ich wirklich verstehe, aber das könnte helfen: http://jsfiddle.net/UwZsm/3
InformationsquelleAutor isherwood
Gut
jsFiddled hier
Die neue Linie problem immer noch vorhanden
Welche neuen problem MIBB ? Und was ist der downvote ??
Die, die er erwähnt. Wenn Sie zum Beispiel o-text 1 und drücken Sie die EINGABETASTE, es gehe nicht um neue Zeile
während der Eingabe in contenteditable div, wenn ich die ENTER-Taste drücken, es sollte gehen, um die nächste Zeile" so SOLL es gehen, um die nächste Zeile ?
InformationsquelleAutor Milche Patern
Getestet habe ich eine Idee, und es funktionierte für das, was Sie reden, glaube ich.
Hoffe, das hilft!
InformationsquelleAutor Shannon Duncan
Ok ich es herausfinden, wenn Sie Zugriff auf den html-code.
InformationsquelleAutor MIIB
http://jsfiddle.net/hari_OM/4GfcJ/2/
Hier ist es ohne jeden Raum.
InformationsquelleAutor Sergiu