textarea 与 label标签对齐

最新推荐文章于 2024-05-15 09:30:00 发布

绿箩

最新推荐文章于 2024-05-15 09:30:00 发布

阅读量7.3k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_26212731/article/details/78522201

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

主要在于设置textarea 与label 的vertical-align属性

代码实例如下：

html代码：

 <form class="customer-form" action="/s">
                <div class="customer-name">
                    <label for="customerName">姓名</label>
                    <input id="customerName" type="text" placeholder="请输入姓名">
                </div>
                <div class="customer-name">
                    <label for="customerEmail">邮箱</label>
                    <input id="customerEmail" type="text" placeholder="请输入邮箱">
                </div>
                <div class="customer-name">
                    <label for="customerTel">电话</label>
                    <input id="customerTel" type="text" placeholder="请输入手机号">
                </div>
                <div class="customer-name">
                    <label for="customerCompany">公司</label>
                    <input id="customerCompany" type="text" placeholder="请输入公司名称">
                </div>
                <div class="customer-name">
                    <label for="customerMessage">留言</label>
                    <textarea id="customerMessage"></textarea>
                </div>
                <div>
                    <button id="submit">提交</button>
                </div>
            </form>

css代码如下（用的less编码，记得转换一下）：

.customer-form{
      >div{
        margin-bottom: 20px;
      }
      label{
        display: inline-block;
        vertical-align: middle;
        color: #000;
        font-weight: normal;
      }
      input{
        vertical-align: middle;
        width: 610px;
        height: 36px;
      }
      textarea{
        width: 610px;
        height: 96px;
        resize:none;
        vertical-align: middle;
      }
    }