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

图片说明

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

8个回答

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

<!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>

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

qq_40285367
qq_40285367 弄一个大的div,套text-align: center
接近 2 年之前 回复

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

用户名:

直到三个文本框对齐

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

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问