收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 3774|回复: 8

[求助] 前端高手指点——关于input表单和文字水平对齐

[复制链接]
发表于 2012-9-5 01:05:01 | 显示全部楼层 |阅读模式
如图所示  这样的INPUT表单文字那些可以做到完全水平对齐的兼容IE/FF/GG吗 ?
未命名.jpg
我研究了好久都没能够弄的明白,都说“vertical-align: middle;”可以解决,但我试了很多方法都没什么太好的效果!
还请各路大师指点。。。谢谢!
 楼主| 发表于 2012-9-5 01:07:33 | 显示全部楼层
追加疑问:图中只是一个INPUT的单选框,如果后面还有其他的多个INPUT的按钮排列,解决方法又否一样?
回复 支持 反对

使用道具 举报

发表于 2012-9-5 07:30:14 | 显示全部楼层
input加样式vertical-align:text-bottom;margin-bottom:-1px;_margin-bottom:2px;
回复 支持 反对

使用道具 举报

发表于 2012-9-5 07:30:35 | 显示全部楼层
多个单个都一样,给input加样式就好
回复 支持 反对

使用道具 举报

发表于 2012-9-5 09:03:38 | 显示全部楼层
你可以好好研究一下inline-block.
回复 支持 反对

使用道具 举报

发表于 2012-9-5 09:07:09 | 显示全部楼层
2楼正解,我的想法跟他一样
回复 支持 反对

使用道具 举报

发表于 2012-9-5 10:09:18 | 显示全部楼层
提示: 作者被禁止或删除。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2012-9-5 10:19:09 | 显示全部楼层
qa5411 发表于 2012-9-5 07:30
多个单个都一样,给input加样式就好

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
        font-family:Arial;
        font-size:12px;
}
input{
        font-size:12px;
        border:none;
        color:#FFF;
        vertical-align:text-bottom;
        margin-bottom:-1px;
        _margin-bottom:2px;
}
.sport_fav {
        color:#FFF;
        display:inline-block;
        width:105px;
        height:21px;
        text-align:center;
        background-image:url(sport_fav_v2.gif);
        text-decoration: none;
}
.button1{
        width:72px;
        height:21px;
        background-image:url(button1_v2.gif);
}
</style>
</head>

<body>
<a class="sport_fav" href="#">
<label for="chkSelected" onclick="_showSelectedReportBalance(this)">Selecd盛大</label>
<input id="chkSelected" class="sport_fav_checkbox" type="checkbox" style="" onclick="_showReportBalance(this)">
</a>
<input id="btnGetReport" class="button1" type="button" value="Get Report">
<input id="btnGetReportToday" class="button1" type="button" value="Today">
<input id="btnGetReportYesterday" class="button1" type="button" value="Yesterday">
<input id="btnGetReportThisWeek" class="button1" type="button" value="This Week">
</body>
</html>

fasdf.jpg
这样还是无法对IE与GG的兼容,GG和FF基本一致,是不是一定得用上HACK招数进行对IE浏览器过滤才可以做的到的呢?
回复 支持 反对

使用道具 举报

发表于 2012-9-5 11:07:57 | 显示全部楼层
可以考虑用input  vertical-align:-3px来对齐,不过 OPERA有点不理想,其他的应该都可以过得去
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-11-1 01:17 , Processed in 0.095460 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表