[已解决]HTML，如何将表单对齐

大仙爱吃糖 · 发表于 2020-9-18 12:35:15

如上图所示，只用html的情况下，怎么将用户名、密码、手机号这些对齐？还有后面的框框也对齐？
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
   <style>
       .top{
           text-align: center;
       }

       .center{
           text-align: center;
       }
   </style>
</head>
<body>
    <div class="top">
        <h1>注册界面</h1>
    </div>
    <hr/>

    <div class="center" >
        <form> 
            用户名：<input type="text" name="username" placeholder="zhangsan"><br/><br/>
            密码：<input type="password" name="pwd" placeholder="123456"/><br><br>
            手机号：<input type="tel" name="tel" placeholder="+86"/><br><br>
            邮箱：<input type="email" name="email" placeholder="@qq.com"><br><br>
            性别: 男：<input type="radio" name="sex"/> 女：<input type="radio" name="sex"/><br><br>
            爱好：<input type="checkbox" />唱歌 
                <input type="checkbox" /> 睡觉
                <input type="checkbox" /> LOL
                <br>
                <input type="checkbox" /> 旅游
                <input type="checkbox" /> 高尔夫
                <input type="checkbox" /> 篮球

                <br><br>
            籍贯：<select >
                    <option>--请选择</option>
                    <option>中国</option>
                    <option>俄国</option>
                    <option>法国</option>
                    <option>德国</option>
                  </select>

            <br><br>
            个人介绍：<textarea rows="10" cols="10" ></textarea>
            <br><br>
            <input type="checkbox" />是否同意协议
            <br><br>
            <input type="submit" value="提交"/>
        </form>
    </div>
</body>
</html>

最佳答案

月排行榜 / 总排行榜

FishC_GPT

2020-9-18 12:35:16

小甲鱼的二师兄发表于 2023-11-26 03:08
使用另外一种方法

另一种方法是使用CSS的Flexbox布局来实现对齐。以下是一个示例代码：

<!DOCTYPE html><html><head><style>.container {  display: flex;  flex-direction: column;  align-items: flex-start;}.label {  margin-right: 10px;}.input {  width: 200px;  margin-bottom: 10px;}.button {  margin-top: 10px;}</style></head><body>    <div class="container">        <h1>注册界面</h1>        <div>            <label class="label" for="username">用户名：</label>            <input class="input" type="text" id="username" name="username">        </div>        <div>            <label class="label" for="password">密码：</label>            <input class="input" type="password" id="password" name="password">        </div>        <div>            <label class="label" for="phone">手机号：</label>            <input class="input" type="text" id="phone" name="phone">        </div>        <!-- 其他表单项 -->        <button class="button" type="submit">注册</button>    </div></body></html>

这个示例使用了一个包含所有表单元素的容器（`<div class="container">`），并通过CSS的Flexbox布局将其子元素在垂直方向上从上到下排列，同时使标签和输入框对齐。`.label`和`.input`类定义了标签和输入框的样式，你可以根据需要进行调整。最后一个按钮被设置为居中对齐。

通过修改和扩展这个示例，你可以实现更复杂的表单布局。

以上回复来自 -- ChatGPT（FishC官方接口），如未能正确解答您的问题，请继续追问。

跳转到最佳答案楼层

FishC_GPT · 发表于 2020-9-18 12:35:16

这个最佳答案由 FishC_GPT 给出，感谢 FishC_GPT 的回答。

单击隐藏图章

小甲鱼的二师兄发表于 2023-11-26 03:08
使用另外一种方法

另一种方法是使用CSS的Flexbox布局来实现对齐。以下是一个示例代码：

<!DOCTYPE html><html><head><style>.container {  display: flex;  flex-direction: column;  align-items: flex-start;}.label {  margin-right: 10px;}.input {  width: 200px;  margin-bottom: 10px;}.button {  margin-top: 10px;}</style></head><body>    <div class="container">        <h1>注册界面</h1>        <div>            <label class="label" for="username">用户名：</label>            <input class="input" type="text" id="username" name="username">        </div>        <div>            <label class="label" for="password">密码：</label>            <input class="input" type="password" id="password" name="password">        </div>        <div>            <label class="label" for="phone">手机号：</label>            <input class="input" type="text" id="phone" name="phone">        </div>        <!-- 其他表单项 -->        <button class="button" type="submit">注册</button>    </div></body></html>

这个示例使用了一个包含所有表单元素的容器（`<div class="container">`），并通过CSS的Flexbox布局将其子元素在垂直方向上从上到下排列，同时使标签和输入框对齐。`.label`和`.input`类定义了标签和输入框的样式，你可以根据需要进行调整。最后一个按钮被设置为居中对齐。

通过修改和扩展这个示例，你可以实现更复杂的表单布局。

以上回复来自 -- ChatGPT（FishC官方接口），如未能正确解答您的问题，请继续追问。

ZSniubi000 · 发表于 2020-9-18 12:51:47

搞个盒子包住,然后text-align: left;

大仙爱吃糖 · 发表于 2020-9-18 13:37:44

ZSniubi000 发表于 2020-9-18 12:51
搞个盒子包住,然后text-align: left;

不行，它变成屏幕靠左对齐了，怎么居中然后对齐？

kogawananari · 发表于 2020-9-18 16:18:40

大仙爱吃糖发表于 2020-9-18 13:37
不行，它变成屏幕靠左对齐了，怎么居中然后对齐？

再把父盒子居中方法很多比如margin auto

大仙爱吃糖 · 发表于 2020-9-18 16:56:46

kogawananari 发表于 2020-9-18 16:18
再把父盒子居中方法很多比如margin auto

我试试

小甲鱼的二师兄 · 发表于 2023-11-26 03:07:25

只用html的情况下，怎么将用户名、密码、手机号这些对齐？还有后面的框框也对齐？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
   <style>
       .top{
           text-align: center;
       }

       .center{
           text-align: center;
       }
   </style>
</head>
<body>
    <div class="top">
        <h1>注册界面</h1>
    </div>
    <hr/>

    <div class="center" >
        <form> 
            用户名：<input type="text" name="username" placeholder="zhangsan"><br/><br/>
            密码：<input type="password" name="pwd" placeholder="123456"/><br><br>
            手机号：<input type="tel" name="tel" placeholder="+86"/><br><br>
            邮箱：<input type="email" name="email" placeholder="@qq.com"><br><br>
            性别: 男：<input type="radio" name="sex"/> 女：<input type="radio" name="sex"/><br><br>
            爱好：<input type="checkbox" />唱歌 
                <input type="checkbox" /> 睡觉
                <input type="checkbox" /> LOL
                <br>
                <input type="checkbox" /> 旅游
                <input type="checkbox" /> 高尔夫
                <input type="checkbox" /> 篮球

                <br><br>
            籍贯：<select >
                    <option>--请选择</option>
                    <option>中国</option>
                    <option>俄国</option>
                    <option>法国</option>
                    <option>德国</option>
                  </select>

            <br><br>
            个人介绍：<textarea rows="10" cols="10" ></textarea>
            <br><br>
            <input type="checkbox" />是否同意协议
            <br><br>
            <input type="submit" value="提交"/>
        </form>
    </div>
</body>
</html>

@FishC_GPT

FishC_GPT · 发表于 2023-11-26 03:07:44

小甲鱼的二师兄发表于 2023-11-26 03:07
只用html的情况下，怎么将用户名、密码、手机号这些对 ...

可以使用HTML的表格（table）来实现对齐。以下是一个示例代码：

<!DOCTYPE html><html><head>    <title>注册界面</title>    <style>        .top {            text-align: center;        }        .center {            text-align: center;        }    </style></head><body>    <div class="top">        <h2>注册界面</h2>    </div>    <div class="center">        <table>            <tr>                <td>用户名：</td>                <td><input type="text" name="username"></td>            </tr>            <tr>                <td>密码：</td>                <td><input type="password" name="password"></td>            </tr>            <tr>                <td>手机号：</td>                <td><input type="text" name="phone"></td>            </tr>            <tr>                <td>邮箱：</td>                <td><input type="text" name="email"></td>            </tr>            <tr>                <td>性别：</td>                <td>                    <label><input type="radio" name="gender" value="male">男</label>                    <label><input type="radio" name="gender" value="female">女</label>                </td>            </tr>            <tr>                <td>爱好：</td>                <td>                    <label><input type="checkbox" name="hobby" value="唱歌">唱歌</label>                    <label><input type="checkbox" name="hobby" value="睡觉">睡觉</label>                    <label><input type="checkbox" name="hobby" value="LOL">LOL</label>                    <label><input type="checkbox" name="hobby" value="旅游">旅游</label>                    <label><input type="checkbox" name="hobby" value="高尔夫">高尔夫</label>                    <label><input type="checkbox" name="hobby" value="篮球">篮球</label>                </td>            </tr>            <tr>                <td>籍贯：</td>                <td>                    <select name="birthplace">                        <option value="">--请选择--</option>                        <option value="中国">中国</option>                        <option value="俄国">俄国</option>                        <option value="法国">法国</option>                        <option value="德国">德国</option>                    </select>                </td>            </tr>            <tr>                <td>个人介绍：</td>                <td><textarea name="introduction"></textarea></td>            </tr>            <tr>                <td></td>                <td><label><input type="checkbox" name="agreement">是否同意协议</label></td>            </tr>        </table>        <br>        <input type="submit" value="注册">    </div></body></html>

在示例代码中，使用了一个表格来布局，并通过`<td>`元素对齐各个输入框和标签。注意，这只是一种简单的布局方法，你可以根据实际需求进行调整和美化。

以上回复来自 -- ChatGPT（FishC官方接口），如未能正确解答您的问题，请继续追问。

小甲鱼的二师兄 · 发表于 2023-11-26 03:08:11

FishC_GPT 发表于 2023-11-26 03:07
可以使用HTML的表格（table）来实现对齐。以下是一个示例代码：

使用另外一种方法

账号		自动登录	找回密码
密码			立即注册