设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › HTML，如何将表单对齐
返回列表 发新帖
查看: 4774|回复: 8

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

[复制链接]
大仙爱吃糖
发表于 2020-9-18 12:35:15 | 显示全部楼层 |阅读模式
10鱼币
屏幕截图 2020-09-18 122738.png
如上图所示，只用html的情况下，怎么将用户名、密码、手机号这些对齐？还有后面的框框也对齐？
代码如下：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>登录</title>
  7.    <style>
  8.        .top{
  9.            text-align: center;
  10.        }

  12.        .center{
  13.            text-align: center;
  14.        }
  15.    </style>
  16. </head>
  17. <body>
  18.     <div class="top">
  19.         <h1>注册界面</h1>
  20.     </div>
  21.     <hr/>

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

  38.                 <br><br>
  39.             籍贯：<select >
  40.                     <option>--请选择</option>
  41.                     <option>中国</option>
  42.                     <option>俄国</option>
  43.                     <option>法国</option>
  44.                     <option>德国</option>
  45.                   </select>

  47.             <br><br>
  48.             个人介绍：<textarea rows="10" cols="10" ></textarea>
  49.             <br><br>
  50.             <input type="checkbox" />是否同意协议
  51.             <br><br>
  52.             <input type="submit" value="提交"/>
  53.         </form>
  54.     </div>
  55. </body>
  56. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
FishC_GPT
2020-9-18 12:35:16
小甲鱼的二师兄 发表于 2023-11-26 03:08
使用另外一种方法

另一种方法是使用CSS的Flexbox布局来实现对齐。以下是一个示例代码：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .container {
  6.   display: flex;
  7.   flex-direction: column;
  8.   align-items: flex-start;
  9. }
  11. .label {
  12.   margin-right: 10px;
  13. }
  15. .input {
  16.   width: 200px;
  17.   margin-bottom: 10px;
  18. }
  20. .button {
  21.   margin-top: 10px;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26.     <div class="container">
  27.         <h1>注册界面</h1>
  28.         <div>
  29.             <label class="label" for="username">用户名：</label>
  30.             <input class="input" type="text" id="username" name="username">
  31.         </div>
  32.         <div>
  33.             <label class="label" for="password">密码：</label>
  34.             <input class="input" type="password" id="password" name="password">
  35.         </div>
  36.         <div>
  37.             <label class="label" for="phone">手机号：</label>
  38.             <input class="input" type="text" id="phone" name="phone">
  39.         </div>
  40.         <!-- 其他表单项 -->
  41.         <button class="button" type="submit">注册</button>
  42.     </div>
  43. </body>
  44. </html>
复制代码

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

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

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

最佳答案

FishC_GPT

查看完整内容

另一种方法是使用CSS的Flexbox布局来实现对齐。以下是一个示例代码： 这个示例使用了一个包含所有表单元素的容器（``），并通过CSS的Flexbox布局将其子元素在垂直方向上从上到下排列，同时使标签和输入框对齐。`.label`和`.input`类定义了标签和输入框的样式，你可以根据需要进行调整。最后一个按钮被设置为居中对齐。 通过修改和扩展这个示例，你可以实现更复杂的表单布局。 以上回复来自 -- ChatGPT（FishC官方接口）， ...
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

FishC_GPT
发表于 2020-9-18 12:35:16 | 显示全部楼层    本楼为最佳答案   
小甲鱼的二师兄 发表于 2023-11-26 03:08
使用另外一种方法

另一种方法是使用CSS的Flexbox布局来实现对齐。以下是一个示例代码：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. .container {
  6.   display: flex;
  7.   flex-direction: column;
  8.   align-items: flex-start;
  9. }
  11. .label {
  12.   margin-right: 10px;
  13. }
  15. .input {
  16.   width: 200px;
  17.   margin-bottom: 10px;
  18. }
  20. .button {
  21.   margin-top: 10px;
  22. }
  23. </style>
  24. </head>
  25. <body>
  26.     <div class="container">
  27.         <h1>注册界面</h1>
  28.         <div>
  29.             <label class="label" for="username">用户名：</label>
  30.             <input class="input" type="text" id="username" name="username">
  31.         </div>
  32.         <div>
  33.             <label class="label" for="password">密码：</label>
  34.             <input class="input" type="password" id="password" name="password">
  35.         </div>
  36.         <div>
  37.             <label class="label" for="phone">手机号：</label>
  38.             <input class="input" type="text" id="phone" name="phone">
  39.         </div>
  40.         <!-- 其他表单项 -->
  41.         <button class="button" type="submit">注册</button>
  42.     </div>
  43. </body>
  44. </html>
复制代码

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

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

以上回复来自 -- ChatGPT（FishC官方接口），如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

ZSniubi000
发表于 2020-9-18 12:51:47 | 显示全部楼层
搞个盒子包住,然后text-align: left;
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

大仙爱吃糖
 楼主| 发表于 2020-9-18 13:37:44 | 显示全部楼层
ZSniubi000 发表于 2020-9-18 12:51
搞个盒子包住,然后text-align: left;

不行，它变成屏幕靠左对齐了，怎么居中然后对齐？
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

kogawananari
发表于 2020-9-18 16:18:40 | 显示全部楼层
大仙爱吃糖 发表于 2020-9-18 13:37
不行，它变成屏幕靠左对齐了，怎么居中然后对齐？


再把父盒子居中  方法很多 比如margin auto
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

大仙爱吃糖
 楼主| 发表于 2020-9-18 16:56:46 | 显示全部楼层
kogawananari 发表于 2020-9-18 16:18
再把父盒子居中  方法很多 比如margin auto

我试试
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

小甲鱼的二师兄
发表于 2023-11-26 03:07:25 | 显示全部楼层
只用html的情况下，怎么将用户名、密码、手机号这些对齐？还有后面的框框也对齐？

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

  12.        .center{
  13.            text-align: center;
  14.        }
  15.    </style>
  16. </head>
  17. <body>
  18.     <div class="top">
  19.         <h1>注册界面</h1>
  20.     </div>
  21.     <hr/>

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

  38.                 <br><br>
  39.             籍贯：<select >
  40.                     <option>--请选择</option>
  41.                     <option>中国</option>
  42.                     <option>俄国</option>
  43.                     <option>法国</option>
  44.                     <option>德国</option>
  45.                   </select>

  47.             <br><br>
  48.             个人介绍：<textarea rows="10" cols="10" ></textarea>
  49.             <br><br>
  50.             <input type="checkbox" />是否同意协议
  51.             <br><br>
  52.             <input type="submit" value="提交"/>
  53.         </form>
  54.     </div>
  55. </body>
  56. </html>
复制代码

@FishC_GPT
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

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

可以使用HTML的表格（table）来实现对齐。以下是一个示例代码：
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <title>注册界面</title>
  6.     <style>
  7.         .top {
  8.             text-align: center;
  9.         }
  11.         .center {
  12.             text-align: center;
  13.         }
  14.     </style>
  15. </head>
  17. <body>
  18.     <div class="top">
  19.         <h2>注册界面</h2>
  20.     </div>
  22.     <div class="center">
  23.         <table>
  24.             <tr>
  25.                 <td>用户名：</td>
  26.                 <td><input type="text" name="username"></td>
  27.             </tr>
  28.             <tr>
  29.                 <td>密码：</td>
  30.                 <td><input type="password" name="password"></td>
  31.             </tr>
  32.             <tr>
  33.                 <td>手机号：</td>
  34.                 <td><input type="text" name="phone"></td>
  35.             </tr>
  36.             <tr>
  37.                 <td>邮箱：</td>
  38.                 <td><input type="text" name="email"></td>
  39.             </tr>
  40.             <tr>
  41.                 <td>性别：</td>
  42.                 <td>
  43.                     <label><input type="radio" name="gender" value="male">男</label>
  44.                     <label><input type="radio" name="gender" value="female">女</label>
  45.                 </td>
  46.             </tr>
  47.             <tr>
  48.                 <td>爱好：</td>
  49.                 <td>
  50.                     <label><input type="checkbox" name="hobby" value="唱歌">唱歌</label>
  51.                     <label><input type="checkbox" name="hobby" value="睡觉">睡觉</label>
  52.                     <label><input type="checkbox" name="hobby" value="LOL">LOL</label>
  53.                     <label><input type="checkbox" name="hobby" value="旅游">旅游</label>
  54.                     <label><input type="checkbox" name="hobby" value="高尔夫">高尔夫</label>
  55.                     <label><input type="checkbox" name="hobby" value="篮球">篮球</label>
  56.                 </td>
  57.             </tr>
  58.             <tr>
  59.                 <td>籍贯：</td>
  60.                 <td>
  61.                     <select name="birthplace">
  62.                         <option value="">--请选择--</option>
  63.                         <option value="中国">中国</option>
  64.                         <option value="俄国">俄国</option>
  65.                         <option value="法国">法国</option>
  66.                         <option value="德国">德国</option>
  67.                     </select>
  68.                 </td>
  69.             </tr>
  70.             <tr>
  71.                 <td>个人介绍：</td>
  72.                 <td><textarea name="introduction"></textarea></td>
  73.             </tr>
  74.             <tr>
  75.                 <td></td>
  76.                 <td><label><input type="checkbox" name="agreement">是否同意协议</label></td>
  77.             </tr>
  78.         </table>
  80.         <br>
  82.         <input type="submit" value="注册">
  83.     </div>
  85. </body>
  87. </html>
复制代码

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

以上回复来自 -- ChatGPT（FishC官方接口），如未能正确解答您的问题，请继续追问。
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

小甲鱼的二师兄
发表于 2023-11-26 03:08:11 | 显示全部楼层
FishC_GPT 发表于 2023-11-26 03:07
可以使用HTML的表格（table）来实现对齐。以下是一个示例代码：

使用另外一种方法
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-6-4 20:40

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表