Home > Article > Web Front-end > How to align input boxes in html
Methods to use HTML to align input boxes are: use the text-align attribute to specify left, right or center to align the text of the input box. Use the float property to float the input box to the left or right side of the page to affect its relative alignment.
How to use HTML to align input boxes
Method 1: Use text-align
Attributes
text-align
Attributes can control text alignment, including text in input boxes. To align an input box based on a specific value, use the following syntax:
<code class="html"><input type="text" style="text-align: left|right|center;"></code>
Example:
<code class="html"><input type="text" style="text-align: right;"></code>
This will create a right-aligned input box.
Method 2: Use the float
attribute
float
attribute to float an element to one side of the page. With a floating input box, you can affect its alignment relative to other elements.
To align the input box using float
, use the following syntax:
<code class="html"><input type="text" style="float: left|right;"></code>
Example:
<code class="html"><div> <input type="text" style="float: right;"> <!-- 在容器内右浮动输入框 --> </div></code>
This will float the input box right inside the container.
Note:
float
Attributes may affect layout, so be careful when using them. clearfix
or similar technique to clear floats to prevent overlapping content. The above is the detailed content of How to align input boxes in html. For more information, please follow other related articles on the PHP Chinese website!