清水鼻涕泡
2018-09-08 07:29
采纳率: 87.5%
浏览 6.6k
已采纳

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

图片说明

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

  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

8条回答 默认 最新

  • 天际的海浪 2018-09-08 08:17
    已采纳
    <!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> 
    
    已采纳该答案
    评论
    解决 2 无用
    打赏 举报
  • qq_39646145 2018-09-08 08:32

    将它们写在table表格里

    评论
    解决 2 无用 1
    打赏 举报
  • 神毓逍遥- 2018-09-08 07:45

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

    评论
    解决 无用
    打赏 举报
  • devmiao 2018-09-08 15:46
     <!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>
    
    评论
    解决 无用
    打赏 举报
  • small_horizon 2018-09-10 07:50

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

    用户名:

    直到三个文本框对齐

    评论
    解决 无用
    打赏 举报
  • smile_zls 2018-09-11 01:38

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

    评论
    解决 无用
    打赏 举报
  • yangxuejingwu 2018-09-12 14:53

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

    评论
    解决 无用
    打赏 举报
  • qq_40285367 2018-09-10 05:17

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

    评论
    解决 无用 1
    打赏 举报

相关推荐 更多相似问题