简单的表单对齐

先来看看最终的效果:

这里主要关注如何将“用户名”“请设置密码”以及他们紧跟的input元素设置为图中的对齐样式。

先来看看html代码:

1 <div class="item">
2   <label><span>*</span>用户名:</label><input type="text" name="nick" id="nick"/>
3 </div>
4 <div class="item">
5   <label><span>*</span>请设置密码:</label><input type="password" name="psw"/>
6 </div>

注意为什么要使用label来包裹“用户名”“请设置密码”,马上就会用到,css代码如下:

1 .item > label{
2   display:inline-block;
3   width:290px;
4   text-align:right; /* 这句话是对齐的关键 */
5   color:#999;
6 }

注意这里对label使用了inline-block属性值,也就是说可以将这个本身是行内元素的label当成块级元素来调整宽高,同时保留了行内元素不会换行的特性,让这个label和后面的input在一行中显示,这个是完成对齐的前提;

其次,将label设置为text-align:right来使label内的文字向右边缘紧靠,从而视觉效果上达到文字和input紧靠的目的,所以这里只需要将包裹“用户名”和“请设置密码”的两个label的width设置一样就能对齐了!

时间: 2024-10-23 04:39:21

简单的表单对齐的相关文章

Java+MyEclipse+Tomcat (二)配置Servlet及简单实现表单提交

在Java EE应用编程中Servlet是基础,JSP是建立在Servlet基础之上的,其他Web框架如Struts.WebWork和Spring MVC都是基于Servlet的.本文主要讲述MyEclipse和Tomcat配置Servlet的过程和简单实现表单提交功能. 希望对大家有所帮助,参考书籍<Java EE企业级应用开发实例教程>. Java+MyEclipse+Tomcat (一)配置过程及jsp网站开发入门 一. Servlet编程 1.Web基础知识 在讲述Servlet之前,

JQuery中一个简单的表单验证的实例

html代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&quo

【java学习】Servlet简单的表单程序(一)

此文用于java学习,在此小记. 在此小Demo中使用到了Servlet,所以有必要了解一下Servlet的相关知识.(Servlet的相关知识摘抄自http://blog.csdn.net/jiuqiyuliang/article/details/36424981) Servlet是Sun公司提供的一门用于开发动态web网页的技术.Sun公司在API中提供了一个servlet接口,我们如果想使用java程序开发一个动态的web网页,只需要实现servelet接口,并把类部署到web服务器上就可

简单的表单验证(js、jquery)

//javascript代码 function valForm(){ var username=document.getElementById("username"); var pwd=document.getElementById("pwd"); var repwd=document.getElementById("repwd"); var email=document.getElementById("email"); va

ASP.NET Razor简单的表单提交处理的代码

如下内容段是关于ASP.NET Razor简单的表单提交处理的内容. <!DOCTYPE html><html> <body> br/>@{if (IsPost){ string companyname = Request["CompanyName"]; string contactname = Request["ContactName"]; <p>You entered: <br> Company

python+django实现的简单的表单验证源码

下面的内容段是关于python+django实现的简单的表单验证的内容,应该能对大伙也有用途. <html> <head> <title>Form validation example</title> <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/bootstrap.css"> </head>

AngularJs的一个简单的表单验证

最近学习了AngularJs框架,觉得确实特别有用.之前学习了一点点的ASP.NET,它的控件也是挺好的,不过还是没有AngularJs轻巧. 定义一个应用程序myApp,一个控制器.接着是表单的验证. AngularJs中,表单控件的HTML元素有:input select button textarea元素 其实还算是很简单的例子. 不过我觉得对比起ASP那种庞大的控件来说,它确实很轻巧. AngularJS 输入验证$dirty 表单有填写记录$valid 字段内容合法的$invalid

最简单的表单验证

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>最简单表单验证</title> 6 <style> 7 form { margin: 20px auto; width: 500px; padding: 20px; border: 1px solid #ccc; box-sh

jQuery学习之路(5)- 简单的表单应用

▓▓▓▓▓▓ 大致介绍 接下来的这几个博客是对前面所学知识的一个简单的应用,来加深理解 ▓▓▓▓▓▓ 单行文本框 只介绍一个简单的样式:获取和失去焦点改变样式 基本结构: 1 <form action="#" method="post" id="regFrom"> 2 <fieldset> 3 <legend>个人基本信息</legend> 4 <div> 5 <label for