易截截图软件、单文件、免安装、纯绿色、仅160KB

CSS 文字与输入框对齐

在进行div+css网页布局的时候,不可避免的需要插入一定的表单元素,input是其中最常见的一种。我们在布局中,常会遇到文本输入框与同处一行的文本不对齐的问题。这个问题设置input的vertical-align:middle属性来解决。
我们来看下面的例子,如何解决文本输入框与文本对齐的问题!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>52css.com</title>
<style type="text/css">
<!--
#a {
 height:30px;
 border:1px solid #ccc;
 }
#b {
 margin-top:20px;
 height:30px;
 border:1px solid #ccc;
 }
#a input {
 width:200px;
 height:30px;
 border:1px solid red;
 }
#b input {
 width:200px;
 height:30px;
 border:1px solid red;
 vertical-align:middle;
 }
-->
</style>
</head>
<body>
<div id="a"><input type="text" />52css.com - Div CSS布局 常见问题</div>
<div id="b"><input type="text" />52css.com - Div CSS布局 常见问题</div>
</body>
</html>
 
a 中没有实现文字和文本框的对齐
b 中实现了对齐的效果!


相关文档:

《精通CSS高级WEB标准解决方案》第七章 布局

我在www.c09.com 发表了这个笔记并上传了原著的PDF,今天有空,转到BLOG上来。
第七章 布局
所有CSS布局技术都依赖于三个基本概念:定位、浮动和空白边操纵
7.1 让设计居中[code]
<body>
<div id='wrapper'>
</div>
</body>
/*最明了的居中方案,可惜IE6不支持*/
#wrapper{
    ......

CSS line height height 属性 ()

定义和用法
line-height 属性设置行间的距离(行高)。
注释:不允许使用负值。
说明
该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底 ......

DIV+CSS样式编写字体大小标准

各地哀悼玉树地震遇难同胞h1
各地哀悼玉树地震遇难同胞32px
各地哀悼玉树地震遇难同胞h2
各地哀悼玉树地震遇难同胞24px
各地哀悼玉树地震遇难同胞h3
各地哀悼玉树地震遇难同胞18px
各地哀悼玉树地震遇难同胞h4
各地哀悼玉树地震遇难同胞16px
各地哀悼玉树地震遇难同胞h5
各地哀悼玉树地震遇难同胞13px
各地哀悼玉 ......

flex设置样式和使用css文件

一:直接设置
二:画面上设置:
 如:
<mx:Style>
    TextArea{
    font-size:36px
    font-weight: bold
    }
</mx:Style>
三:使用外置文件
<mx:Style source="style.csss"/> ......

css中 display属性和visibility的区别

display Property Values
ValueDescription
none
The element will generate no box at all
block
The element will generate a block box (a line break before and after the element)
inline
The element will generate an inline box (no line break before or after the element). This is default
inline-blo ......
© 2009 ej38.com All Rights Reserved. 关于E健网联系我们 | 站点地图 | 赣ICP备09004571号