美文网首页
input标签对齐方式

input标签对齐方式

作者: cld_bert | 来源:发表于2017-02-26 00:28 被阅读0次

直入主题吧,直接写input标签去做对齐,是很难对齐,所以之前一直都是用table表格去对齐,这个大家应该都知道(我还是放一个简单的demo吧)。现在发现一个更好的对齐方式。是通过label标签去对齐。

第一种 直接用input

这种不太好对齐 可能用&nbsp去对齐,但是太麻烦。

第二种 用table去布局

这种比较好对齐,可以采用
<table >
        <tr><td>登录名</td><td><input type="text"></td></tr>
        <tr><td>密码</td><td><input type="text"></td></tr>
    </table>
效果是这样的

第三种 用label标签来对齐

<label for="inputs">登录名</label><input type="text" id="inputs"></input>
    <br />
    <label for="input2">密码</label><input type="text" id="input2"></input>
这样只需要在css中设定
label{
            display: inline-block;
            min-width: 100px;/*或者 width: 100px;*/
        }
这样就ok了

好了 到这里也就结束了 拜

相关文章

  • input标签对齐方式

    直入主题吧,直接写input标签去做对齐,是很难对齐,所以之前一直都是用table表格去对齐,这个大家应该都知道(...

  • CSS水平居中

    水平居中的理解 text-align:center; 内容对齐方式,不是子元素(标签)对齐方式 先...

  • 【组件】输入框-标签的对齐方式

    常见输入框标签对齐方式 1.顶部对齐:对标签规则性要求低,适合长标签或长度差异大的标签(但长标签首先应尽可能简练)...

  • 2019-07-29 正则表达式

    input前面的文字可以给标签套用起来 然后给高度 text align: right 会自己对齐 单选框与文字对...

  • input输入框只允许输入数字

    最简单的方式是 input 标签里加上一句

  • 单词

    align 对齐方式 (文本标签属性) left 左 center 中 right 右 widht 宽度(img标...

  • 前端 数据提交方法

    一、Form表单形式 标签:form(声明调用的方法action和请求方式method)标签:input(字段na...

  • vue实现文件上传

    本文主要介绍input标签实现的文件上传 input 标签上传也有两种写法 一、隐藏input标签 将input标...

  • HTML表单标签

    表单标签 表单所有数据均保存在 内。action: 提交的地址method:请求方式 输入框标签 ...

  • html表单用法

    form标签 input标签 其他标签

网友评论

      本文标题:input标签对齐方式

      本文链接:https://www.haomeiwen.com/subject/rnznwttx.html