首页H5中制作登陆界面如何让账户行和密码行对齐

H5中制作登陆界面如何让账户行和密码行对齐

时间: 2024-12-15 18:22:38 浏览: 8

在HTML5中创建登录界面并使账户名和密码输入框对齐，你可以使用CSS中的Flexbox或Grid布局。以下是使用Flexbox的一个简单示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .login-form { display: flex; justify-content: center; /* 中心对齐 */ align-items: center; /* 部分元素顶部对齐 */ width: 300px; padding: 20px; border: 1px solid #ccc; box-sizing: border-box; } .input-row { display: flex; align-items: baseline; /* 使行内元素顶部对齐 */ margin-bottom: 10px; } input[type="text"], input[type="password"] { flex: 1; /* 自适应宽度 */ padding: 8px; margin-right: 10px; border: none; outline: none; } </style> </head> <body> <div class="login-form"> <div class="input-row"> <label for="username">账户名:</label> <input type="text" id="username" name="username" placeholder="请输入账号"> </div> <div class="input-row"> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="请输入密码"> </div> <button>登录</button> </div> </body> </html> ``` 在这个例子中，`.input-row` 的 `align-items: baseline;` 确保了标签文本和输入字段都在同一水平线上。你可以根据需要调整样式。

阅读全文