`
sibyl_pisces
  • 浏览: 145991 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

css表单对齐解决方案

    博客分类：
  • css
CSSVBIEXHTMLHTML 
阅读更多

     表单的样式一直是前端所重视的，也是最难解决的，每个人的解决方法不懂，今天在网上看到这个方法，很不错，大家可以试试，运用到了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/


 

 

分享到：
| 如何使用代理服务器上网
评论
1 楼 jyslb 2011-09-23  
这个不错
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    html5+css3实现酷炫的form表单

    此外，CSS3的Flexbox和Grid布局系统为表单元素的排列和对齐提供了强大的解决方案。Flexbox适合处理一维布局，如水平或垂直排列的表单控件，而Grid则适用于二维布局，可以轻松实现响应式设计，让表单在不同设备和屏幕...

    Folio使用React和CSSGrid布局构建的动态表单

    这些工具和技术的结合，使得Folio能够创建出强大、易维护且视觉上吸引人的动态表单解决方案。 总的来说，Folio项目展示了React和CSS Grid在构建动态表单方面的强大潜力。React提供了组件化的开发模式和高效的UI更新...

    CSS 文本域和按钮对齐不一致解决方案

    为了解决CSS中文本域和按钮对齐不一致的问题，我们可以通过一些CSS属性的调整来达到界面元素的整齐对齐。 首先，要解决文本域和按钮文字对齐的问题，需要对`label`标签中的文字进行对齐处理。通常情况下，文字默认...

    HTML表单CSS

    - Flexbox和Grid布局：提供更现代、灵活的布局解决方案，适用于复杂的表单结构。 四、响应式设计 确保表单在不同设备和屏幕尺寸上表现良好，可以使用媒体查询 (`@media`) 实现响应式布局，调整元素大小、间距和排列...

    表单元素与提示文字无法对齐的解决方法(input,checkbox文字对齐）

    总之，解决表单元素与提示文字无法对齐的问题通常需要调整CSS样式，包括设置垂直对齐方式、内边距和外边距。使用Flexbox或Grid布局也可以提供更灵活的解决方案。通过这些技术，我们可以创建出整洁、易于阅读的表单，...

    表单元素和文字垂直居中对齐问题解决整理

    给出的完整代码示例展示了如何在HTML和CSS中实现这一解决方案。在这个例子中，使用了类`.input`、`.checkbox`和`.radio`来分别定义输入框、单选框和复选框的样式。通过这些类，我们可以看到针对不同元素的`vertical-...

    CSS实现让同一行文字和输入框对齐的方法

    `同样是一个有效的解决方案。 综上所述，`vertical-align`是实现网页中文本与输入框等元素垂直对齐的一个强大工具。通过简单的CSS规则设置，可以显著提升页面的整体美观度和用户体验。在实际开发过程中，开发者应...

    HTML5+CSS3源码_纯CSS3实现Metro风格登录表单.rar.rar

    Flexbox允许灵活地调整子元素的排列、对齐和大小，而Grid则提供了二维布局的解决方案，可以方便地创建复杂的网格系统。 在表单验证方面，HTML5新增了一些内置的表单验证属性，如`required`、`pattern`等，可以简化...

    HTML和CSS HTML&CSS

    `flexbox`和`grid`布局系统提供更灵活和响应式的布局解决方案，适应不同屏幕尺寸。 **第5章 表单** HTML表单用于用户输入数据，`&lt;form&gt;`标签定义表单，`&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;select&gt;`和`&lt;button&gt;`创建各种...

    normalize.css-5.0.0.zip

    总的来说，normalize.css 5.0.0是一个优秀的解决方案，它在保持网页元素基本一致性的基础上，兼顾了可访问性、可读性和性能，是现代Web开发中的理想选择。无论你是新手还是经验丰富的开发者，都可以从这个现代化的...

    div+css教案.pdf

    11. 解决CSS设计问题：探讨常见问题的解决方案。 12. 实战案例：以旅游酒店网站为例，将所学知识应用于实际项目。 课程采用机房演示教学和上机实践相结合的方式，每节课都包含理论讲解和动手实践，确保学生能够将...

    表单checkbox和radio文字对齐的代码

    今天，我们将讨论如何使用 CSS 来实现表单checkbox和radio文字的垂直居中对齐。 为什么需要对齐 在网页设计中，表单元素的对齐非常重要。良好的对齐可以提高用户体验，提高网站的可读性和美观性。而在使用checkbox...

    normalize.css-7.0.0.zip

    这个名为“normalize.css-7.0.0.zip”的压缩包文件，正是包含了一个名为“normalize.css”的版本7.0.0的CSS文件，它为开发者提供了一个现代化的替代传统CSS重置的解决方案。 传统的CSS重置，如Eric Meyer's Reset或...

    表单元素radio select对齐与IE6下双边距问题解决方案

    描述中提到的解决方案是通过将`&lt;label&gt;`标签与`&lt;input&gt;`、`&lt;select&gt;`元素进行垂直对齐，同时处理IE6的双边距问题。首先，我们需要理解`vertical-align`这个CSS属性。`vertical-align`用于设置行内元素或表格单元格...

    CSS种针对浏览器兼容问题的解决方法

    ### CSS针对浏览器兼容问题的解决方法 在网页开发过程中，不同浏览器对于CSS的支持程度各不相同，这导致了页面在不同浏览器下展示效果的差异。本文将详细介绍如何解决这些兼容性问题，帮助开发者确保网站在各种...

    normalize.css-6.0.0.zip

    为了解决这个问题，"normalize.css-6.0.0"应运而生，它是一种现代的、替代传统CSS重置的方法。 "normalize.css"的核心理念是保持HTML元素的一致性，而不是完全清除所有默认样式。传统的CSS重置如Eric Meyer's ...

    HTML5+CSS3网站设计基础教程_动手实践源代码

    5. **CSS3布局**：Flexbox（弹性盒模型）和Grid（网格布局）为复杂网页布局提供了强大的解决方案，使得元素对齐、间距调整和响应式设计变得简单。 6. **CSS3过渡与动画**：通过transition和animation属性可以实现...

Magicbox
Global site tag (gtag.js) - Google Analytics