多个文本框左对齐的问题

最新推荐文章于 2023-02-07 11:27:12 发布

minzhang_03

最新推荐文章于 2023-02-07 11:27:12 发布

阅读量3.5k

点赞数 2

分类专栏：前端基础学习笔记文章标签： CSS

本文链接：https://blog.csdn.net/min_0329/article/details/79357555

版权

7 篇文章 0 订阅

订阅专栏

一、通常方法

html

<body>
账号等：<input type="text"name=""><br>
密  码：<input type="text" name="">
</body>

css

//文本框的样式

input{
       width: 200px ;
       height: 25px;
       background-color: red ;
       margin-bottom: 5px;
}

我们一般会想到通过使用 加空格的方式来对齐文本框，但是通过实践表明这样做无法得到严格左对齐的效果。

--效果--

二、给文字设置浮动，添加宽高

html

<body>
<span>账号等：</span><input type="text"name=""><br>
<span>密码：</span><input type="text"name="">
</body>

css

//文字设置左浮动，加宽高

span{
       float: left;
       width: 60px;
       height: 25px;
}

//文本框的样式

input{
       width: 200px ;
       height: 25px;
       background-color: red ;
       margin-bottom: 5px;
}

--效果--

minzhang_03

关注

专栏目录