怎样使html中的上下2个text文本框对齐?

怎样使html中的上下2个text文本框对齐?,第1张

<table><tbody><tr> <td>文字</td><td><input type="text"></td> <td>文字</td><td><input type="text"></td> <td>文字</td><td><input type="text"></td> <td>文字</td><td><input type="text"></td> </tr></tbody></table> 

HTML超文本置标语言,用以描述超文本,是为网页创建和其它可在网页浏览器中看到的信息设计的一种置标语言。

HTML文本框文字对齐方式:

1、baseline:默认。元素放置在父元素的基线上。

2、sub:垂直对齐文本的下标。

3、super:垂直对齐文本的上标。

4、top:把元素的顶端与行中最高元素的顶端对齐。

5、text-top:把元素的顶端与父元素字体的顶端对齐。

6、middle:把此元素放置在父元素的中部。

7、bottom:把元素的顶端与行中最低的元素的顶端对齐。

8、text-bottom:把元素的底端与父元素字体的底端对齐。

9、inherit:规定应该从父元素继承 vertical-align 属性的值。

代码:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html charset=GBK">

<style>

.login { overflow:hidden width:300px}

.login .login-item { padding:10px 0 overflow:hidden clear:both line-height:25pxpadding:0px}

.login .login-item label { float:left text-align:right width:80px}

.login .login-item div { float:left}

.login .login-tools { text-align:center}

</style>

</head>

<body>

<div class="login">

    <div class="login-item">

        <label>用户名:</label>

        <div><input type="text" /></div>

    </div>

    

    <div class="login-item">

        <label>密码:</label>

        <div><input type="password" /></div>

    </div>

    <div class="login-tools">

     <input type="button" value="登录" />

     <input type="button" value="重置" />

    </div>

</div>

</body>

</html>

效果:


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/6282511.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存