css表单对齐解决方案

最新推荐文章于 2024-08-25 08:02:39 发布
最新推荐文章于 2024-08-25 08:02:39 发布
阅读量756 收藏 1
点赞数
分类专栏： css 文章标签： CSS VB IE XHTML HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_4429/article/details/81968711
版权

     表单的样式一直是前端所重视的，也是最难解决的，每个人的解决方法不懂，今天在网上看到这个方法，很不错，大家可以试试，运用到了display:inline-block这个属性。

 

 

/* style.css */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{padding:0;margin:0;}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,th,var{font-weight:normal;font-style:normal}
strong, b{ font-weight: bold; }
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-weight:700;}
h1{font-size:18px}
h2{font-size:16px}
h3{font-size:14px}
h4{font-size:14px}
h5{font-size:12px}
h6{font-size:12px}
q:before,q:after{content:''}
abbr,acronym{border:0}
hr {margin: 0;padding: 0;border: 0;color: #CDCDCD;background-color: #CDCDCD;height: 1px}
blockquote{color:#666;font-style:italic;}
sup,sub{line-height:0}
abbr,acronym{border-bottom:1px dotted #666}
pre{white-space:pre;}
pre,code,tt{font:12px 'andale mono', 'lucida console', monospace;line-height:1.5}
body{font:12px/1.5 Tahoma;}
h1{padding:10px 0; margin-bottom:10px; color:#666; border-bottom:1px solid #ccc; font-size:12px;}
.con{color:#666; padding:10px 20px; background:#FFC;}
.con ul{padding:0 10px;}

/* form */
.sd-form-list{position:relative;font-size:12px; line-height:1.5; font-family:Tahoma;}/*这里使用Tahoma字体使表单对齐*/
.sd-form-list .form-position-right{position:absolute; right:10px; top:0;}
.sd-form-list .sd-form-txt{height: 20px; padding-left:3px; line-height:20px;background-color:#FFFFFF; border:1px solid #BBBBBB;

vertical-align:middle;}
.sd-form-list .row{margin-bottom:6px;}/*每行间距*/
.sd-form-list input{vertical-align:middle;}
.sd-form-list .sd-form-label{display:inline-block; width:110px; *display:inline; *zoom:1; text-align:right; vertical-
align:middle;}/*width控制左列宽,text-align设置对齐方式*/
.sd-form-list label.vt{vertical-align:top;}
.sd-form-list label.vb{vertical-align:bottom;}
.sd-form-list .sd-form-label em{color:red; margin-right:5px; font-family:simsun; font-style:normal;}
.sd-form-list .collection{display:inline-block; *display:inline; *zoom:1; vertical-align:middle;}
.sd-form-list .rc{ margin-right:10px;}
.sd-form-list .rc input{vertical-align:text-top; width:13px; height:15px;  margin-right:5px;}
.sd-form-list select{height:22px; border:1px solid #bbb; vertical-align:middle;font-family:Tahoma; font-size:12px;}
.sd-form-list .sd-textarea{padding:3px; border:1px solid #bbb; width:400px; height:60px; font:12px/1.5em Tahoma;overflow-y:auto;}
.sd-form-list span.sd-mark{color:red; padding-left:10px;}
.sd-form-list p.sd-mark{color:red; padding-left:0; padding-top:3px;}
.sd-form-list .sd-form-file{vertical-align:middle; *height:22px;}
.sd-form-list .sd-form-btn{overflow:visible; padding:0 10px;}
 

 

<!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="Content-Type" content="text/html; charset=gbk">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<title>样式之美，依然延续——css表单对齐解决方案</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
<div style="margin: 10px auto; width: 530px;">
  <h1>css表单对齐解决方案</h1>
  <div class="sd-form-list">
    <div class="form-position-right"><a href="#">编辑</a> | <a href="#">删除</a></div>
    <div class="row">
      <label class="sd-form-label">纯文字：</label>
      <div class="collection"> 这里是文字 </div>
    </div>
    <div class="row">
      <label class="sd-form-label">纯字母：</label>
      <div class="collection"> 1234567890 </div>
    </div>
    <div class="row">
      <label class="sd-form-label"><em>*</em>单行文本框：</label>
      <div class="collection">
        <input class="sd-form-txt" type="text">
        <span class="sd-mark">表单验证</span> </div>
    </div>
    <div class="row">
      <label class="sd-form-label">密码文本框：</label>
      <div class="collection">
        <input class="sd-form-txt" type="password">
      </div>
    </div>
    <div class="row">
      <label class="sd-form-label">单选框：</label>
      <div class="collection">
        <label class="rc">
        <input type="radio">
        项目1</label>
        <label class="rc">
        <input type="radio">
        项目2</label>
      </div>
    </div>
    <div class="row">
      <label class="sd-form-label">多选框：</label>
      <div class="collection">
        <label class="rc">
        <input type="checkbox">
        项目1</label>
        <label class="rc">
        <input type="checkbox">
        项目2</label>
      </div>
    </div>
    <div class="row">
      <label class="sd-form-label">下拉列表：</label>
      <div class="collection">
        <select>
          <option selected="selected">选项1</option>
        </select>
        <select>
          <option selected="selected">选项2</option>
        </select>
        <select>
          <option selected="selected">选项3</option>
        </select>
      </div>
    </div>
    <div class="row">
      <label class="sd-form-label vt">文本域：</label>
      <div class="collection">
        <textarea class="sd-textarea" rows="3" cols=""></textarea>
        <p class="sd-mark">表单验证</p>
      </div>
    </div>
    <div class="row">
      <label class="sd-form-label">上传控件：</label>
      <div class="collection">
        <input class="sd-form-file" type="file">
      </div>
    </div>
    <div class="row">
      <label class="sd-form-label">label居中：</label>
      <div class="collection">
        <textarea class="sd-textarea" rows="3" cols=""></textarea>
      </div>
    </div>
    <div class="row">
      <label class="sd-form-label vb">label居底：</label>
      <div class="collection">
        <textarea class="sd-textarea" rows="3" cols=""></textarea>
      </div>
    </div>
    <div class="row mt10">
      <label class="sd-form-label"> </label>
      <div class="collection">
        <input class="sd-form-btn" value="保存" type="submit">
        <input class="sd-form-btn" value="取消" type="button">
      </div>
    </div>
  </div>
  <div class="con">
    <p>解决:</p>
    <ul>
      <li>单选/多选框对齐与默认间距问题</li>
      <li>实现了左侧文字垂直居顶居中居底</li>
    </ul>
    <p>缺点：暂不支持14px字体</p>
  </div>
</div>
</body>
</html>
 

 

原作者：http://blog.xiedaima.org/css/css-form-align/


 

 

iteye_4429
关注
专栏目录
表单对齐方式
m0_72959610的博客
08-29 3252
表单对齐方式
CSS 文本域和按钮对齐不一致解决方案
09-25
为了解决CSS中文本域和按钮对齐不一致的问题，我们可以通过一些CSS属性的调整来达到界面元素的整齐对齐。 首先，要解决文本域和按钮文字对齐的问题，需要对`label`标签中的文字进行对齐处理。通常情况下，文字默认...
CSS 表单元素对齐详解
dos_186的博客
08-28 2562
简单的设置input{vertical-align:middle}即可 完美的 label{vertical-align:middle} input{vertical-align:middle;} body{font-family:tahoma Verdana;font-size:12px;} 详细讲解开始啦~~~ 单(复)选框和它们后面的提示文字在不进行任何设置的情况
SDFormat解析与使用指南
最新发布
gitblog_00034的博客
08-25 859
SDFormat解析与使用指南 sdformatSimulation Description Format (SDFormat) parser and description files.项目地址:https://gitcode.com/gh_mirrors/sd/sdformat 1. 项目目录结构及介绍 Gazebosim下的SDFormat项目主要聚焦于提供一种标准化的XML格式来描述机器...
CSS表单对齐方式
weixin_45573299的博客
08-13 2567
这里例举一个表单的代码，如下： <div> <div class="box"> <label>输入用户名：</label> <input placeholder="用户名"> </div> <div class="box"> <label>输入密码：</label> <input placeholder=
表单对齐
GY_java0819的博客
11-08 841
今天做练习的时候题目要求如上对齐但是我做出来是始终是这样的效果。。。 翻看了很多大佬的讲解，发现其实只需要给文字描述部分加上标签并对该标签内的所有字体做格式规定就可以完成对齐 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1..
表单元素与提示文字无法对齐的解决方法(input,checkbox文字对齐）
09-25
总之，解决表单元素与提示文字无法对齐的问题通常需要调整CSS样式，包括设置垂直对齐方式、内边距和外边距。使用Flexbox或Grid布局也可以提供更灵活的解决方案。通过这些技术，我们可以创建出整洁、易于阅读的表单，...
表单元素和文字垂直居中对齐问题解决整理
09-25
给出的完整代码示例展示了如何在HTML和CSS中实现这一解决方案。在这个例子中，使用了类`.input`、`.checkbox`和`.radio`来分别定义输入框、单选框和复选框的样式。通过这些类，我们可以看到针对不同元素的`vertical-...
表单元素radio select对齐与IE6下双边距问题解决方案
12-13
本篇主要讨论的是如何处理表单内的`radio`和`select`元素对齐问题，以及解决在IE6下的双边距问题。 表单元素，如`radio`和`select`，经常需要与提示文字对齐，以提供清晰的用户界面。传统的做法是使用`label`标签与...
包含文件上传的表单_表单的对齐方式
weixin_39880632的博客
11-22 434
| 什么是表单？百度百科的解释是表单在网页中主要负责数据采集功能。用通俗易懂的话来说，就是我们看到的页面需要填写较多相关信息的页面，都叫做表单，如下图。| 表单的内容从设计的范围上来看，包含了两个方面：1.表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。2.表单按钮：包括提交按钮、复位按钮和一般按钮；| 表单的对齐方式今天来说说表单的对齐方式，...
表单对齐操作
qq_57220516的博客
02-28 5791
表单对齐，制作注册界面
css实现表单 文字两端对齐
晏紫苏_cc的博客
05-17 821
文字两端对齐 <div class="form"> <div>姓名</div> <div>手机号码</div> <div>用户名</div> <div>密码</div> </div> <style> .form div { width: 100...
表单文字整体对齐
￠虾咪┆℡ 的博客
06-13 164
<ul> <li class="li">姓&emsp;&emsp;名：<input type="text" /></li> <li class="li">手&ensp;机&ensp;号：<input type="text" /></li> <li cl...
表单对齐，送给新手~
热门推荐
zsx0321的专栏
06-28 1万+
这是一个右端的输入框对齐，文字向右对齐的登录表单，在DIV+CSS中控制它们还费了一点时间来折腾，下面整理出来让大家了解，其中CSS要注意的几个地方就是文中红字的地方。 body {font:12px/19px Arial, Helvetica, sans-serif; color:#666;} input.required{border:#999 1px solid; height:16
表单内标题对齐
Stefan_liu的专栏
03-21 780
做网页表单，标题尽量对齐，看起来就舒服些。 如果每个标题字数都一样，自然最好，但有时做不到，但也可以对齐的： 代码如下： tr> 2                 td class="tdHead">传span style="color:#fff;">传真span>真td>td>asp:Label ID="labFax" runat="server">asp
实现表单对齐排列布局
月来better
12-23 3025
项目中几乎都设计到表单这一功能，表单布局也是必不可少的一个话题，下面要实现的就是表单对齐排列布局 第一种实现方式： <div id="form"> <div> <label>姓名：</label> <input type="text" value="" /> </div> <div> <label>出生地：</label> <input type="text" value
如何让前端页面表单排列对齐
yunduanaoligei的博客
10-15 1008
今天分享下”如何让前端页面表单排列对齐“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 表单编码如下，还没有添加样式表，表单沒有两端对齐，较为难看，可是HTML又都没有给予表单两端对齐的标识或作用。 html源代码： ​​​​ ​​<​​​​html​​ ​​lang​​​​=​​​​"en"​​​​>​​ ​​<​​​​head​​​​>​​ ​​<​​​​meta​​ ​​chars
今天你对齐了吗，浅析中后台表单的设计艺术
m1024292777的博客
04-12 1018
就如同期待进入一个井然有序、明亮舒适的室内空间一样，前端开发者在设计表单时应展现出对细节把控的严谨态度以及对美学标准的不懈追求，这体现在诸如流畅的输入体验和规整的布局设计等方面，其中对齐原则是最基础也是最关键的设计素养，我们期许它能在实践中升华，成为执着追求的一种信仰。为了达成这一目标，巧妙的运用格式塔原则来优化表单的视觉结构和感知，选取适宜的布局方案，以显著增强表单的易用性和操作效率，这就是所谓的“施展表单设计的魔法”。运用适当的“重复”，人们可以在瞬间把握版面的构成和内容，极大地提升信息传达的程度。
CSS Reset方法及其问题分析
然而，这种方法并非完美，它会清空所有元素的内边距和外边距，包括按钮、表单元素等，可能会影响某些设计的初衷。例如，`Minimalistic Reset`的不同版本： 1. Version 1: 只清除了`padding`和`margin`，对于边框...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值