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

最新推荐文章于 2023-01-29 10:09:56 发布

转载最新推荐文章于 2023-01-29 10:09:56 发布 · 2.4k 阅读

文章标签：

#CSS

CSS 专栏收录该内容

4 篇文章

订阅专栏

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

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