So deaktivieren Sie den automatischen Zeilenumbruch in HTML

Methoden zum Deaktivieren des automatischen Zeilenumbruchs in HTML: 1. Fügen Sie dem HTML-Element den Stil „display:inline“ hinzu und legen Sie das Element als Inline-Element fest. 2. Fügen Sie dem zu erstellenden HTML-Element den Stil „float:left“ hinzu Das Element bricht aus dem Dokumentfluss ab und wird in derselben Zeile angezeigt.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Demo:

<div>性别：
<input id="sex0" name="sex" type="radio" value="0" checked="checked"/>男
<input id="sex1" name="sex" type="radio" value="1"/>女
</div>

So zeigen Sie zwei Eingaben in derselben Zeile an:

1. Verwenden Sie den Anzeigestil: inline

<style>
.c{
    display:inline;
}
</style>
<div>性别：
<input class="c" id="sex0" name="sex" type="radio" value="0" checked="checked"/>男
<input class="c" id="sex1" name="sex" type="radio" value="1"/>女
</div>

display:inlineDie Funktion besteht darin, das anzuzeigende Objekt als Inline-Element festzulegen , inline ist der Standardwert des Objekts (ps: Ein Inline-Objekt ist ein Element, das nicht automatisch Zeilenumbrüche generiert, z. B. die Verwendung dieses Werts löscht Zeilen aus dem Objekt).

Wenn beide Eingänge inline sind, befinden sie sich in derselben Zeile. Beispielsweise handelt es sich bei den von uns im Allgemeinen verwendeten Divs um Elemente auf Blockebene, und das Standardanzeigeattribut ist Block. Wenn die Anzeige des Divs jedoch auf „Inline“ eingestellt ist, können mehrere Divs in einer Zeile angezeigt werden.

2. Verwenden Sie den Stil float:left (nicht empfohlen)

<style>
.f{
    float:left;
}
</style>
<div class="f">性别：
<p class="f"><input id="sex0"  class="f"  name="sex" type="radio" value="0" checked="checked"/>男</p>
<p class="f"><input id="sex1"  class="f"  name="sex" type="radio" value="1"/>女</p>
</div>

Die Verwendung mit mehreren Elementen ist schwieriger und kann zu Verwirrung bei der Position anderer Elemente führen.

Andere Verwendung für Klartext

1. Tag

<nobr> 12345456<nobr>

3. Tag

<div nowrap>123123123</div>

【Empfohlenes Lernen:

Html5 Tutorial

】

Das obige ist der detaillierte Inhalt vonSo deaktivieren Sie den automatischen Zeilenumbruch in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!