您的位置：首页 > 编程技术 > html  >  HTML实现表单元素对齐的例子

HTML实现表单元素对齐的例子

 更新时间：2016年9月20日 18:58  点击：1538
表单元素对齐我碰到很多次都对不上去了，下文一聚教程小编来为各位整理一篇HTML实现表单元素对齐的例子，希望文章能够对各位带来帮助。

网页里，常见如下的表单代码：

<div>
  <label for='email'>邮箱地址：</label>
  <input name='email' type='text'/>
</div>
<div>
  <label for='password'>密码：</label>
  <input name='password' type='text'/>
</div>
通常，我们想达到下面这种排版效果：

邮箱地址：


密码：


Bootstrap 里是这么写1：

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
</form>

代码中用到了 grid，然后两个 label 设定同样的宽度，并且 label 内的文本右对齐。

但如果不考虑移动端的情况的话，我觉得可以这样写：

<style>.u-textRight { text-align: right !important; }</style>

<div class='u-textRight'>
  <label for='email'>邮箱地址：</label>
  <input name='email' type='text'/>
</div>
<div class='u-textRight'>
  <label for='password'>密码：</label>
  <input name='password' type='text'/>
</div>


label 与 input 都是 inline 元素，我在它们的包含块上设定右对齐，这样不需要给 label 指定宽度，代码也更简洁。

HTML实现表单元素对齐的例子

Markdown是一种可以使用普通文本编辑器编写的标记语言，通过类似HTML的标记语法，它可以使普通文本内容具有一定的格式，下面我们来看一篇关于HTML 标签中的 Markdown 语法。

Markdown 官方文档1有一句：

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style emphasis inside an HTML block.

markdown 不能写在块级 HTML 标签内，就是说，我们下面这样写是不行的：

<div>
**加粗我**
</div>
** 不会解析为 <strong></strong>。

但我在 WordPress 后台用的 Markdown 插件 PHP Markdown Extra2 扩展了该功能，可以这样写：

<div markdown="1">
**加粗我**
</div>
下面是输出结果：

<div>

<p><strong>加粗我</strong></p>

</div>
我之所以要用这个功能，是为了添加 Microdata3 的缘故。拿我的读书页面说，现在 Markdown 部分是这样写的：

时间|书名|作者
---|---|---
2013.1.27|无中生有|莎士比亚
2013.1.28|道连·格雷的画像|王尔德
添加 microdata 的 HTML 如下：

<div itemscope itemtype="http://schema.org/Table">
  <h2 itemprop="about">我喜欢的书</h2>
  <!-- 表格内容在这 -->
</div>
借助 PHP Markdown Extra，可以在 div 块中嵌入 markdown 写法：

<div itemscope itemtype="http://schema.org/Table" markdown="1">
  <h2 itemprop="about">我喜欢的书</h2>
  <!-- markdown 表格在这 -->
</div>
这样，我就给我的表格加入 Microdata 了。

[!--infotagslink--]

相关文章

  • php语言实现redis的客户端

    php语言实现redis的客户端与服务端有一些区别了因为前面介绍过服务端了这里我们来介绍客户端吧，希望文章对各位有帮助。 为了更好的了解redis协议，我们用php来实现...2016-11-25

  • jQuery+jRange实现滑动选取数值范围特效

    有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15

  • JS实现的简洁纵向滑动菜单(滑动门)效果

    本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考，具体如下：这是一款纵向布局的CSS+JavaScript滑动门代码，相当简洁的手法来实现，如果对颜色不满意，你可以试着自己修改CSS代码，这个滑动门将每一...2015-10-21

  • JS中artdialog弹出框控件之提交表单思路详解

    artDialog是一个基于javascript编写的对话框组件，它拥有精致的界面与友好的接口。本文给大家介绍JS中artdialog弹出框控件之提交表单思路详解，对本文感兴趣的朋友一起学习吧...2016-04-19

  • 使用JQuery实现Ctrl+Enter提交表单的方法

    有时候我们为了省事就操作键盘组合键去代替使用鼠标，我们今天就使用JQuery实现Ctrl+Enter提交表单。我们发帖时，在内容输入框中输入完内容后，可以点击“提交”按钮来发表内容。可是，如果你够“懒”，你可以不用动鼠标，只需按...2015-10-23

  • jQuery+slidereveal实现的面板滑动侧边展出效果

    我们借助一款jQuery插件：slidereveal.js，可以使用它控制面板左右侧滑出与隐藏等效果，项目地址：https://github.com/nnattawat/slideReveal。如何使用首先在页面中加载jquery库文件和slidereveal.js插件。复制代码 代码如...2015-03-15

  • PHP+jQuery翻板抽奖功能实现

    翻板抽奖的实现流程：前端页面提供6个方块，用数字1-6依次表示6个不同的方块，当抽奖者点击6个方块中的某一块时，方块翻转到背面，显示抽奖中奖信息。看似简单的一个操作过程，却包含着WEB技术的很多知识面，所以本文的读者应该熟...2015-10-21

  • SQLMAP结合Meterpreter实现注入渗透返回shell

    sqlmap 是一个自动SQL 射入工具。它是可胜任执行一个广泛的数据库管理系统后端指印, 检索遥远的DBMS 数据库等，下面我们来看一个学习例子。 自己搭建一个PHP+MYSQ...2016-11-25

  • 基于JavaScript实现表单密码的隐藏和显示出来

    为了网站的安全性，很多朋友都把密码设的比较复杂，但是如何密码不能明显示，不知道输的是对是错，为了安全起见可以把密码显示的，那么基于js代码如何实现的呢？下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示，需要的朋友参考下...2016-03-03

  • BootStrap栅格系统、表单样式与按钮样式源码解析

    这篇文章主要为大家详细解析了BootStrap栅格系统、表单样式与按钮样式源码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2017-01-23

  • PHP实现今天是星期几的几种写法

    复制代码 代码如下: // 第一种写法 $da = date("w"); if( $da == "1" ){ echo "今天是星期一"; }else if( $da == "2" ){ echo "今天是星期二"; }else if( $da == "3" ){ echo "今天是星期三"; }else if( $da == "4"...2013-10-04

  • 原生js实现fadein 和 fadeout淡入淡出效果

    js里面设置DOM节点透明度的函数属性：filter= "alpha(opacity=" + value+ ")"（兼容ie）和opacity=value/100（兼容FF和GG）。 先来看看设置透明度的兼容性代码： 复制代码 代码如下: function setOpacity(ele, opacity) { if (...2014-06-07

  • react使用antd表单赋值,用于修改弹框的操作

    这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29

  • html表单提交中method请求Get和Post区别详解

    在html表单提交中method请求Get和Post区别其实很显示的，get提交会是url形式的并且数据量不能太多，而post数据是在浏览器url看不到的并且可以是大数据量而且get安全性非...2016-09-20

  • 微信小程序 PHP后端form表单提交实例详解

    这篇文章主要介绍了微信小程序 PHP后端form表单提交实例详解的相关资料,需要的朋友可以参考下...2017-01-16

  • JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)

    这篇文章主要介绍了JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结，非常不错，具有参考借鉴价值，需要的朋友参考下吧...2017-06-15

  • Android中用HttpClient实现Http请求通信

    本文我们需要解决的问题是如何实现Http请求来实现通信，解决Android 2.3 版本以后无法使用Http请求问题，下面请看正文。 Android开发中使用HttpClient来开发Http程序...2016-09-20

  • 解决antd Form 表单校验方法无响应的问题

    这篇文章主要介绍了解决antd Form 表单校验方法无响应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-28

  • 基于Bootstrap实现Material Design风格表单插件 附源码下载

    Jquery Material Form Plugin是一款基于Bootstrap的Material Design风格的jQuery表单插件。这篇文章主要介绍了基于Bootstrap的Material Design风格表单插件附源码下载，感兴趣的朋友参考下...2016-04-19

  • vue2 中如何实现动态表单增删改查实例

    本篇文章主要介绍了vue2 中如何实现动态表单增删改查实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-06-15