关于Input文字格式的对齐问题

uNlanD

于 2018-07-09 15:54:33 发布

阅读量2.4k

点赞数

分类专栏： CSS 文章标签： CSS

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文通过一个简单的表单实例展示了如何使用CSS进行布局和样式设置，包括如何调整元素间距及实现文本两端对齐等效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
        form{
            width: 400px;
            padding: 20px 0;
            margin: 0 auto;
        }
        form >label{
            display: inline-block;
            width: 100%;
        }
        form>label>*{
            float: left;
            line-height: 24px;
        }
        form>label>span{
            display: inline-block;
            width: 100px;
            height: 24px;
            text-align: justify;//设置文字段落的两端对齐，此处为划重
        }
        form>label>input{
            display: inline-block; 
        }
        i{
            display: inline-block;//i在页面的的中填充文字间的距离。图一为具有CSS样式的i，图二无
            width: 100%;
        }
    </style>

<form>
          <label for=""><span>用户名1：<i></i></span><input type="text"></label>
          <label for=""><span>密222码：<i></i></span><input type="text"></label>
          <label for=""><span>年3龄：<i></i></span><input type="text"></label>
      </form>