HTML，如何将表单对齐
如上图所示，只用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> 小甲鱼的二师兄 发表于 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官方接口），如未能正确解答您的问题，请继续追问。 搞个盒子包住,然后text-align: left; ZSniubi000 发表于 2020-9-18 12:51
搞个盒子包住,然后text-align: left;
不行，它变成屏幕靠左对齐了，怎么居中然后对齐？{:10_262:} 大仙爱吃糖 发表于 2020-9-18 13:37
不行，它变成屏幕靠左对齐了，怎么居中然后对齐？
再把父盒子居中方法很多 比如margin auto kogawananari 发表于 2020-9-18 16:18
再把父盒子居中方法很多 比如margin auto
我试试 只用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 小甲鱼的二师兄 发表于 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官方接口），如未能正确解答您的问题，请继续追问。 FishC_GPT 发表于 2023-11-26 03:07
可以使用HTML的表格（table）来实现对齐。以下是一个示例代码：
使用另外一种方法
页:
[1]