html 5 文本框对齐问题 想让这三个文本框对齐了

图片说明

如图我想让这三个文本框对齐了 怎么办呢 求解答

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
<style type="text/css">
.text {
    display: inline-block;
    width: 200px;
}
</style>
</head>
<body>
<div style="text-align: center;">
    <h2><span class="text">用户名：</span><input type="text"/></h2>
    <h2><span class="text">密码：</span><input type="text"/></h2>
    <h2><span class="text">确认密码：</span><input type="text"/></h2>
</div>
</body>
</html>

将它们写在table表格里

 <!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title> xxx</title>
    <style>
        label{
            display: inline-block;
            width: 100px;
            text-align: right;
        }
        div{
            padding: 5px 0;
        }
    </style>
</head>
<body>
<form action="">
    <div>
        <label for="t1">xxxx</label>
        是<input id="t1" type="radio"> 否<input type="radio">
    </div>
    <div>
        <label for="t2">xxxxxxxx</label>
        是<input id="t2" type="radio"> 否<input type="radio">
    </div>
    <div>
        <label for="t3">xxxxxxxxxxxxx</label>
        是<input id="t3" type="checkbox">
    </div>
    <div>
        <label for="t6">xxxx</label>
        <input id="t6" type="text">
    </div>
    <div>
        <label for="t4">xx22123xx</label>
        <input id="t4" type="text">
    </div>
    <div>
        <label for="t5">xxxx</label>
        <select name="" id="t5">
            <option value="">1value</option>
            <option value="">2value</option>
            <option value="">3value</option>
            <option value="">4value</option>
        </select>
    </div>
</form>
</body>
</html>

加个“”&nbsp“”吧！直到能对齐就行了

可以调整标签的左外边距,如:

用户名:

直到三个文本框对齐

杀伤力很强的一个方法，margin，padding

你这个后面的框是一样的大的，就把你的text-align: center改成text-align: right就行了啊，靠右对齐。

添加text-align: center;属性或者打&nbsp知道对齐，打表格也可以