ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLで自動行折り返しを無効にする方法

HTMLで自動行折り返しを無効にする方法

醉折花枝作酒筹
醉折花枝作酒筹オリジナル
2021-04-07 14:38:357584ブラウズ

HTML で自動行折り返しを無効にする方法: 1. 「display:inline」スタイルを html 要素に追加し、要素をインライン要素として設定します; 2. 「float:left」スタイルをhtml要素をドキュメントストリームから要素として作成し、同じ行に表示するにはfloatを使用します。

このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

デモ:

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

2 つの入力を同じ行に表示する方法:

1. スタイル display: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:inline は、インライン要素として表示されるオブジェクトを設定するために使用されます。Inline は、インライン オブジェクトのデフォルト値です (追記: インライン オブジェクトは自動的には表示されません)改行を生成します。span などの要素) オブジェクトから行を削除するには、この値を使用します。

両方の入力がインラインの場合、それらは同じ行にあります。たとえば、一般的に使用する div はブロックレベル要素であり、デフォルトの表示属性は block ですが、div の表示をインラインに設定すると、複数の div を 1 行に表示できます。

2. float:left スタイルを使用します (非推奨)

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

複数の要素で使用するのは面倒で、位置が混乱する可能性があります他の要素の。

プレーン テキストのその他の使用法

1. Tag

<nobr> 12345456<nobr>

2. Tag

<div nowrap>123123123</div>

3. Tag

<pre class="brush:php;toolbar:false">23423423

4. スタイル

c{ 
    white-space:nowrap; 
}

[推奨学習: Html5 チュートリアル]

以上がHTMLで自動行折り返しを無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。