label文字与textarea、input垂直居中、顶部对齐的方法

在网站表单制作时label标签里的文字与Iput、textarea标签的默认对齐方式不美观,如下图。

中国网页设计给大家分享label文字与input、textarea垂直居中对齐和顶部对齐的简单方法。

label文字与textarea、input垂直居中的方法

label文字与textarea、input垂直居中、顶部对齐的方法

在input标签样式中加入css标签vertical-align: middle。

label文字与input、textarea垂直居中对齐代码示例一:

<label for="address"> 姓名:</label>
<input type="text" name="address" id="address" maxlength="30" style="vertical-align:middle;" /> 
<label for="note"> 留言:</label>
<textarea name="note" id="note" style="width:150px;height:40px;vertical-align:middle;"></textarea>

label文字与input、textarea垂直居中对齐代码示例二:

<style type="text/css">  
    input,textarea { display:inline-block; margin-right:3px; vertical-align:middle;}  
</style>  
<div>  
    <p class="clearfix">  
        <label for="name">姓名</label>  
        <input type="text" name="name" />  
    </p>  
    <p class="clearfix">  
        <label for="msg">留言</label>  
        <textarea name="msg" rows="5" cols="13"></textarea>  
    </p>  
</div>

label文字与textarea、input顶部对齐的方法

label文字与textarea、input垂直居中、顶部对齐的方法

<style type="text/css">  
    /*--- 清除浮动 ---*/  
    .clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden;}  
    .clearfix { display:block;}  
    label { line-height:21px; float:left; margin-right:3px;}  
</style>  
<div>  
    <p class="clearfix">  
        <label for="name">姓名</label>  
        <input type="text" name="name"/>  
    </p>  
    <p class="clearfix">  
        <label for="msg">留言</label>  
        <textarea name="msg" rows="5" cols="13"></textarea>  
    </p>  
</div>

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/1553.html

(1)
江山如画的头像江山如画管理团队
上一篇 2018年3月18日 上午9:13
下一篇 2018年3月18日 上午11:46

99%的人还看了以下文章

  • 给网页中的按钮和图片添加声音

    Loud links-是一款大小只有1.5KB的WEB音效插件,可以实现网页中按钮与图片等元素的触发交互,比如鼠标放上去后出现响声,或者鼠标点击后出现响声。Loud links使用相当简单。 使用方法 1. 在网页中引入JS 文件 <script src=”js/loudlinks.min.js”></script> 2. 在需要触发…

    2018年2月6日
    4.8K0
  • 第2课:CSS的工作原理

    在这一课,你将学习如何制作自己的第一个样式表。你将了解基本的CSS模型,以及在HTML文档里使用CSS所必需的代码。

    2020年2月22日
    2.6K0
  • Div+CSS左侧尺寸固定右侧自适应布局的5种实现方法

    css多栏自适应布局一般使用position属性布局,或者用float属性布局,也可以使用display属性。 position适合首页布局,因为首页内容往往可以完全控制。float适合模板布局,模板中填充的内容无法控制。 相关阅读:左侧固定,右侧自适应布局的两种实现方法 1、浮动实现 原理:左侧定宽浮动,右侧使用margin-left,且不要定宽,容器尺寸…

    2021年11月29日
    1.7K0
  • 第3课:颜色与背景

    本课,你将学习如何在网站上应用颜色与背景。我们还会介绍用于定位和控制背景图像的高级方法。

    2020年2月22日
    2.4K0
  • 3个超酷的CSS3图片动画特效:图片变圆角,放大,旋转

    本实例制作需要学习《CSS3 transition transform属性及实例详解》,学完后可先练习CSS3 transform:rotate()制作旋转图片 See the Pen 三个CSS3图片动画特效 by 江山如画 (@jgyzhr)on CodePen.

    2020年1月1日
    2.3K0
  • 第4课:字体

    这一课,你将学习字体以及如何用CSS来设置字体。我们还会考虑如何解决“网站所选的字体仅当访问者的PC上安装有该字体时才会被显示”这一难题。本课将对下列CSS属性进行讲解: font-family font-style font-variant font-weight font-size font 字体族[font-family] CSS属性font-fami…

    2020年2月22日
    2.5K0

发表回复

登录后才能评论