布局小锦囊之一 - 话题 - Yii Framework 中文网

圆般 2011-04-22 15:55:23 4292次浏览 5条回复 0 0 0

我们在用Yii时候,有时会碰到验证码,在布局版面时候会发现往往textfield 与 Captcha生成的Img标签不在同一行. 这时候我们可以通过设置css来纠正这个问题. 给input和img都加上vertical-align:middle: (改input的vertical-align:baseline;也许会有意外的惊喜哦 ) 例子:

<!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>
<title>CSS Document</title>
<style type="text/css">
<!--
p {border:1px #e9e9e9 solid;}
input{vertical-align:middle;}
img{vertical-align:middle;width:100px;height:50px;}
-->
</style>
</head>
<body>
<form name="form1" action="" method="post">
<p>
        选择日期：
        <input type="text" name="textfield" />&nbsp;
        <img src="http://bbs.blueidea.com/images/default/logo.gif" alt="ss" />
</p>
</form>
</body>
</html>

╃巡洋艦㊣回复于 2011-04-22 16:06 举报

谢谢分享！

回复 0 0
swustnjtu 回复于 2011-05-01 12:47 举报

效果不错，赞一个

回复 0 0
gaoyef 回复于 2011-05-03 08:26 举报

谢谢分享！

回复 0 0
gaoyef 回复于 2011-05-03 09:35 举报

我实验了一下。
[img][/img][attach]134[/attach]

在css中，一个是文字，一个是span，没有效果。

回复 0 0
yhl27ml@163.com 回复于 2011-05-25 22:05 举报

可能会对我有用的

回复 0 0