java 对齐文本框_如何对齐文本框和旁边的图像按钮

一个文本框旁边一个按钮是很经常用到的网页内容，比如搜索框等等，而如果旁边的按钮使用图像的话，他们竖直方向就很不容易对齐，即使使用

vertical-align、padding和margin等都不行(特别是在IE中，Firefox中使用vertical-align还可以)。

例如有如下代码：

type="text"name="foo"value="Test Field"/>

type="image"src="data:images/button.gif" />

其效果是：

解决方案非常简单，上述代码修改为：

type="text"name="foo"value="Test Field"/>

type="image"src="data:images/button.gif"style="position:absolute" />

这时，在Firefox和IE中的效果分别是：

可以看到，在Firefox中，如果事先做好的图像和文本框的高度完全一致，那么他们就会完全对齐了；而在IE中，则按钮图像比文本框高一个像素。

因此可以针对IE浏览器稍作调整：

type="text"name="foo"value="Test Field"/>

type="image"src="data:images/button.gif"style="position:absolute;+margin-top:1px" />

注意，这里在”margin-top”属性前面有一个加号，对于Firefox浏览器，这个属性设置就无效了；而对于IE浏览器，会忽略掉这个加号，因此针对IE浏览器，上面就会存在这1像素的margin了。在这时，在Firefox和IE中的效果分别是：

到这里，在竖直方向经对齐得很好了，水平方向上，在Firefox和IE中，还略有区别，在Firefox中二者紧靠在一起，在IE中，二者之间有一点点间隔。但是水平方向的控制就容易多了，这里就不再细调整了，读者可以自己试验一下。

=================快乐的分割线==============

一个简单而优雅得多的方法解决这个问题，非常好用，方法是对需要对齐的input元素使用 vertical-align 属性比如：

.img, .input, .select{

vertical-align:middle;

}

java 对齐文本框_如何对齐文本框和旁边的图像按钮相关推荐

php 文本格式化_格式化PHP文本
php 文本格式化 So you've gone through the PHP tutorials or are new to PHP in general, and you can make so ...
两端分散对齐怎么设置_分散对齐(Word文档两端对齐、分散对齐设置方法)
分散对齐(Word文档两端对齐.分散对齐设置方法),哪吒游戏网给大家带来详细的分散对齐(Word文档两端对齐.分散对齐设置方法)介绍,大家可以阅读一下,希望这篇分散对齐(Word文档两端对齐.分散对齐 ...
excel vba 文本框_自动调整Excel文本框的大小
excel vba 文本框 If other people will be using the Excel files that you build, it might help them if yo ...
java 滚动显示信息_滚动显示文本的Java程序
/** * 文件名:ScrollFrame.java * 环境: GNU/Linux Ubuntu 7.04 + Eclipse 3.2 + JDK 1.6 * 功能:滚动文本显示面板Demo * 版 ...
java 去掉pdf文字_如何从PDF文件中删除所有图像/图纸,并仅在Java中留下文本？
我在类似的情况下使用Apache PDFBox. 要更具体一点,请尝试这样的事情: import org.apache.pdfBox.exceptions.COSVisitorException; i ...
access“idno”字段改为文本型_结构化文本计算示例（一）
结构化文本是很常见的文件格式,对结构化文本的计算也是很常见的需求.在实现这种计算时,一种很容易想到的办法是将文件导入数据库后再计算,但这会消耗大量时间以及昂贵的数据库资源,而且有的场合下并没有合适的数 ...
python多功能文本编辑器_多功能文本编辑器(EditPad Pro)
EditPad Pro 是一款多功能文本编辑器,设计的目标就是在保持程序小巧简洁的同时,提供所有基础编辑功能.EditPad Pro 可以在 Windows 98.Me.NT4.2000.XP.Vis ...
python实现文本审核_百度AI文本审核API使用说明
虽然,虽然,虽然,今天: 百度发布了2019年第一季度未经审计的财务报告.本季度百度营收241亿元人民币(约合35.9亿美元),同比增长15%,移除业务拆分收入影响,同比增长21%.低于市场预期242 ...
js富文本编辑器_自制富文本编辑器
前言介绍一款 markdown富文本编辑器源码 https://gitee.com/pingfanrenbiji/markdown-nice 这里要感谢一些开源作者这位大佬的微信公众号是本地启 ...

java 对齐文本框_如何对齐文本框和旁边的图像按钮

java 对齐文本框_如何对齐文本框和旁边的图像按钮相关推荐

最新文章

热门文章