仅使用 html 如何控制文字和文本框对齐

以一个注册页面为例,要想使提示信息和文本框对齐,可以采用 table 标签使其结构规整,整个页面效果如下:
在这里插入图片描述
附上完整的源代码作为参考:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
<div align="center">
    <h2>注册页面</h2>
    <hr>
    <form action="163注册页面.html" method="post">
        <table>
            <tr>
                <td width="100px"><label for="name">姓名:</label></td>
                <td><input type="text" value="zhangsan" id="name"></td>
            </tr>
            <tr>
                <td><label for="pwd">密码:</label></td>
                <td><input type="password" id="pwd"></td>
            </tr>
            <tr>
                <td><label for="phone">手机号:</label></td>
                <td><input type="text" maxlength="11" id="phone"></td>
            </tr>
            <tr>
                <td><label for="email">邮箱:</label></td>
                <td><input type="email" id="email"></td>
            </tr>
            <tr>
                <td>性别 :</td>
                <td>
                    <label for="man">男 :</label>
                    <input type="radio" name="sex" id="man">
                    <label for="woman">女 :</label>
                    <input type="radio" name="sex" id="woman">
                </td>
            </tr>
            <tr>
                <td>爱好:</td>
                <td>
                    <input type="checkbox" id="sing"><label for="sing">唱歌</label>
                    <input type="checkbox" id="sleep"><label for="sleep">睡觉</label>
                    <input type="checkbox" id="lol"><label for="lol">LOL</label>
                    <br>
                    <input type="checkbox" id="travel"><label for="travel">旅游</label>
                    <input type="checkbox" id="golf"><label for="golf">高尔夫</label>
                    <input type="checkbox" id="basketball"><label for="basketball">篮球</label>
                </td>
            </tr>
            <tr>
                <td>籍贯:</td>
                <td>
                    <select id="select">
                        <option value="">~请选择~</option>
                        <option value="">湖南</option>
                        <option value="">湖北</option>
                        <option value="">广州</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td><label for="it">个人介绍:</label></td>
                <td><textarea name="introduce" id="it" cols="30" rows="10"></textarea></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="checkbox" id="ck">
                    <label for="ck">是否同意本公司协议</label>
                </td>
            </tr>
        </table>
        <p><input type="submit" value="注册"></p>
    </form>
</div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_44214671/article/details/112419228