HTMLで入力ボックスを整列させる方法

HTML を使用して入力ボックスを整列させる方法は次のとおりです。 text-align 属性を使用して、入力ボックスのテキストを左揃え、右揃え、または中央揃えに指定します。 float プロパティを使用して入力ボックスをページの左側または右側にフロートさせ、相対的な配置に影響を与えます。

HTML を使用して入力ボックスを配置する方法

方法 1: text- を使用するalign 属性

text-align 属性は、入力ボックス内のテキストを含むテキストの配置を制御できます。特定の値に基づいて入力ボックスを配置するには、次の構文を使用します。

<code class="html"><input type="text" style="text-align: left|right|center;"></code>

• left: left-aligned
• right: 右揃え
• center: 中央揃え

例:

<code class="html"><input type="text" style="text-align: right;"></code>

これにより、右揃えが作成されます。整列された入力ボックス。

方法 2: float 属性

float 属性を使用して、要素をページの片側にフローティングします。フローティング入力ボックスを使用すると、他の要素との相対的な配置に影響を与えることができます。

float を使用して入力ボックスを整列するには、次の構文を使用します。

<code class="html"><input type="text" style="float: left|right;"></code>

• left: Float を左側に配置します。 page
• right: ページの右側にフローティングします

例:

<code class="html"><div>
  <input type="text" style="float: right;">  <!-- 在容器内右浮动输入框 -->
</div></code>

これはフローティングになりますコンテナ内の入力ボックス。

注:

• float 属性はレイアウトに影響を与える可能性があるため、使用する場合は注意してください。
• clearfix または同様の手法を使用してフロートをクリアし、コンテンツの重複を防ぎます。

以上がHTMLで入力ボックスを整列させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。