Wie verhindere ich, dass ein DIV-Tag eine neue Zeile startet?

86

Ich möchte eine einzelne Textzeile an den Browser ausgeben, der ein Tag enthält. Wenn dies gerendert wird, scheint es, dass der DIV eine neue Zeile verursacht. Wie kann ich den Inhalt in das div-Tag in derselben Zeile aufnehmen - hier ist mein Code.

<?php 
  echo("<a href=\"pagea.php?id=$id\">Page A</a>") 
?>
<div id="contentInfo_new">
  <script type="text/javascript" src="getData.php?id=<?php echo($id); ?>"></script>
</div>

Ich habe versucht, es hier aufzuräumen. Wie kann ich diese Anzeige in einer einzelnen Zeile haben?

html css nicht definiert
quelle
Nur um darauf hinzuweisen, brauchen Sie die Klammern nicht, wenn Sie Echo verwenden. echo $id;ist so gültig wie echo($id);.
Eddie Hart

Antworten:

137

Das divTag ist ein Blockelement, das dieses Verhalten verursacht.

Sie sollten spanstattdessen ein Element verwenden, das inline ist.

Wenn Sie wirklich verwenden möchten div, fügen Sie hinzu style="display: inline". (Sie können das auch in eine CSS-Regel einfügen)

SLaks
quelle
13
Nur display: inlinewiderspricht , was die DIV für ist, so bitte nicht tun! Verwenden Sie stattdessen die Spanne.
Robert K
27
Ich bin mir dessen sehr wohl bewusst. deshalb habe ich geschrieben if you really want to.
SLaks
20
Ein div wird als Teilung einer Seite vor HTML5 definiert. Es ist nicht mit Präsentationsmerkmalen definiert. Mit anderen Worten, ein div ist gemäß seiner Definition basierend auf dem Inhalt und den darin enthaltenen Elementen semantisch angemessen. Infolgedessen ist es vollkommen in Ordnung, ein div so einzustellen, dass es angezeigt wird: inline und keine Semantik oder Standarddefinition verletzt.
2
In meinem Fall konnte ich span nicht verwenden, da ich eine Break-Word-Zeilenumbruch-Eigenschaft definieren wollte und diese nur für Elemente vom Typ Block funktionieren. Aber ich konnte div nicht verwenden, weil ich keine neue Zeile wollte. Also habe ich stattdessen display: inline-blockein div-Element verwendet. Sagen Sie, was Sie über Stil wollen, aber dies löste beide Probleme.
Jsarma
Bei mir hat es nicht geklappt! Ich habe erwartet, dass es die Zelle erweitert, in der sich div befindet, aber es hat sich nichts geändert
rezKesh
36

Ich bin kein Experte, aber versuche es white-space:nowrap;

Die Leerzeichen-Eigenschaft wird in allen gängigen Browsern unterstützt.

Hinweis: Der Wert "inherit"wird in IE7 und früheren Versionen nicht unterstützt. IE8 erfordert a !DOCTYPE. IE9 unterstützt "inherit".

Shivanshu
quelle
Großartig, wenn Sie Inline-Block-Elemente benötigen, um nicht am Ende der Zeile zu overflow: hidden
umbrechen
16

div ist ein Blockelement, das immer eine eigene Zeile einnimmt.

Verwenden Sie spanstattdessen das Tag

Cobbal
quelle
10
Sie verwechseln Präsentation für Funktion. Ein div nimmt eine eigene Zeile ein, da es standardmäßig und ohne anderen Grund als display: block angezeigt wird.
1
Aber span erzeugt auch vorher und nachher einen Zeilenumbruch?
user3761308
6

Fügen Sie style="display: inline"Ihrem div hinzu.

Franz
quelle
5

benutze float: links auf dem div und dem link oder benutze eine span.

Jimmeh
quelle
1

Verwenden Sie die CSS-Eigenschaft - Leerzeichen: nowrap;

Jithjob Ignatious
quelle
0

Eine bessere Möglichkeit, eine Unterbrechungslinie zu erstellen, ist die Verwendung von span mit dem CSS-Stilparameter white-space: nowrap;

span.nobreak {
  white-space: nowrap;
}

or
span.nobreak {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Beispiel direkt in Ihrem HTML

<span style='overflow:hidden; white-space: nowrap;'> YOUR EXTENSIVE TEXT THAT YOU CAN´T BREAK LINE ....</span>
Alex. Manfrin
quelle
-1 
<div style="float: left;">
<?php 
  echo("<a href=\"pagea.php?id=$id\">Page A</a>") 
?>
</div>
<div id="contentInfo_new" style="float: left;">
  <script type="text/javascript" src="getData.php?id=<?php echo($id); ?>"></script>
</div>
dfilkovi
quelle
3
schreckliche Idee, Javascript + PHP zu verwenden, wenn Sie nur mit CSS in Ordnung sein können.
ZurabWeb
@Piero Warum sagst du das? Ein Backend wird normalerweise für eine Frontend-App benötigt
Curious
3
@Curious true, aber das Backend sollte sich mit Backend-Dingen wie Berechnungen und Datenverarbeitung befassen, während das Frontend den Browsern zur Verarbeitung überlassen bleiben sollte. Dies reduziert die Serverlast und verbessert die Benutzererfahrung. Dies ist allgemein ausgedrückt. In diesem speziellen Fall wäre jedoch <a href="pagea.php?id=<?php echo $id; ?> "> Seite A </a> gut genug. Und warum sollte man mit getData.php PHP analysieren und Javascript ausgeben lassen, wenn dies von Apache erledigt werden kann? So: src = "getData.js? Id = <? Php echo $ id;?>"
ZurabWeb
-2

Sie können einfach verwenden:

#contentInfo_new br {display:none;}
user3012794
quelle