页面input控件对齐

时间:2021-07-22
本文章向大家介绍页面input控件对齐，主要包括页面input控件对齐使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
<!--用table布局、 label的inline-block 对齐input-->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
        label{
            /*设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。*/
            display: inline-block;
            min-width: 100px;/*或者 width: 100px;*/
        }
    </style>
</head>
<body>
<div class="web_login">
    <ul>
        <ul>
            <!--accept-charset 属性规定服务器处理表单数据所接受的字符集.此属性的默认值是
            "unknown"，表示表单的字符集与包含表单的文档的字符集相同-->
            <form name="form2" id="regUser" accept-charset="utf-8"  action="/security/addregister" method="post">
                <!--用label对齐-->
                <label for="input1">登录名：</label>
                <input type="text" id="input1" name="name1"></input>
                <br />
                <label for="input2">密码：</label>
                <input type="text" id="input2" name="name2"></input>

                <!--用table对齐-->
                <table >
                    <tr>
                        <td>用户名：</td>
                        <td><input type="text" name="username" maxlength="16"/></td>
                    </tr>
                    <tr>
                        <td>密码：</td>
                        <td><input type="password" name="password1" maxlength="16" /></td>
                    </tr>
                    <tr>
                        <td>确认密码：</td>
                        <td><input type="password" name="password2" maxlength="16" /></td>
                    </tr>
                </table>

                <div class="inputArea">
                    <a th:href="@{/security/readdoc}" target="_blank">阅读注册协议</a>
                    <input type="submit" value="同意协议并注册"/>
                </div>
            </form>
        </ul>
    </ul>
</div>
</body>
</html>

原文地址：https://www.cnblogs.com/wfy680/p/15046347.html

随机文章
本站知识点必读
最近更新