`

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

阅读更多

一个文本框旁边一个按钮是很经常用到的网页内容,比如搜索框等等,而如果旁边的按钮使用图像的话,他们竖直方向就很不容易对齐,即使使用 vertical-align、padding和margin等都不行(特别是在IE中,Firefox中使用vertical-align还可以)。

例如有如下代码:

<form> <input type="text"name="foo"value="Test Field"/> <input type="image"src="images/button.gif" /> </form>

其效果是:

解决方案非常简单,上述代码修改为:

<form> <input type="text"name="foo"value="Test Field"/> <input type="image"src="images/button.gif"style="position:absolute" /> </form>

这时,在Firefox和IE中的效果分别是:

firefox中的效果   ie中的效果

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

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

<form>
<input type="text"name="foo"value="Test Field"/>
<input type="image"src="images/button.gif"style="position:absolute;+margin-top:1px" /> </form>

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

firefox中的效果   ie中的效果

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

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

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

.img, .input, .select{

       vertical-align:middle;

}

分享到:
评论

相关推荐

    CSS如何对齐文本框和其旁边的图像按钮比如搜索框等等

    在网页设计中,对齐文本框和旁边的图像按钮是一项常见需求,尤其是在创建搜索框这样的元素时。文本框通常需要与旁边的按钮(无论是文本按钮还是图像按钮)在视觉上保持一致。在CSS中,可以通过不同的属性实现对齐,...

    怎样对齐文本框和图像(image)按钮实现三点一线

    一个文本框旁边一个按钮是很经常用到的网页内容,比如搜索框等等,而如果旁边的按钮使用图像的话,他们竖直方向就很不容易对齐,即使使用 vertical-align、padding和margin等都不行(特别是在IE中,Firefox中使用...

    VB控件属性大全,必备词典

    在VB中,常用的控件包括但不限于:Label(标签)、TextBox(文本框)、Button(按钮)、ListBox(列表框)、ComboBox(组合框)、CheckBox(复选框)、RadioButton(单选按钮)、PictureBox(图片框)、Timer(计时...

    delphi控件

    **Alignment 属性**:此属性控制单选按钮和关联文本的排列方式。例如,它可以设置为左对齐、居中或右对齐。 #### CheckBox 组件 **AllowGrayed 属性**:如果设置为 `True`,则允许复选框处于灰色未选中状态。这...

    AutoPlay_Menu_Builder6.0.1328注册版

    如果您不了解某个特定按钮的功能,可以在该按钮上按下鼠标并保持按下状态,按钮上图像的变化反映了该按钮按下后的效果。松开按钮将会执行对齐操作。如果您不想应用当前操作,可以拖动鼠标到对齐面板外部再松开按键。...

    AutoPlay_Menu_Builder5.5.0.1328注册版

    如果您不了解某个特定按钮的功能,可以在该按钮上按下鼠标并保持按下状态,按钮上图像的变化反映了该按钮按下后的效果。松开按钮将会执行对齐操作。如果您不想应用当前操作,可以拖动鼠标到对齐面板外部再松开按键。...

    vb控件大全与使用教程

    - **对齐方式(Alignment)**:文本在标签中的对齐方式(左对齐、居中或右对齐)。 - **字体(Font)**:设置标签的字体样式、大小等。 - **颜色(ForeColor)**:文本的颜色。 - **背景颜色(BackColor)**:标签的背景颜色...

    Swing基本标签使用

    在实际应用中,标签常与其他组件(如按钮、文本框等)组合使用,创建更复杂的用户界面。例如,可以将标签放在按钮的旁边,提供操作提示。 9. 综合实例 以下是一个简单的Swing程序,展示如何创建并设置一个标签: ``...

    二上海市计算机一级模拟题.pdf

    - 插入图片 `\picture.jpg`,调整图片高度和宽度为原图的20%,并在图片旁边添加文本框,内含文字“中国馆”,按照样张所示位置放置。 ### 三、网页设计 #### 1. HTML与CSS基础 - 使用HTML创建网页结构。 - 设置...

    Adobe_Indesign认证题目题库

    - **单个文本框实现多种效果**:通过设置不同的对齐方式、缩进等属性,可以在同一个文本框内实现多种文本布局效果。 - **首行缩进与左缩进的区别**:首行缩进用于调整段落首行的起始位置,而左缩进则调整整个段落的...

    VB控件属性大全

    - **说明**:设置单选按钮旁边文字的颜色。 **TabStop** - **说明**:设置单选按钮是否参与Tab键导航。 - **取值**: - `True` 参与 - `False` 不参与 **Visible** - **说明**:设置单选按钮是否可见。 - **取值...

    flash shiti

    按钮的属性有UP和OVER; C. 按钮的属性有DOWN; D. 按钮的属性有HIT. 42.图形文件中,哪几种格式的矢量图能被Flash直接引用? A. *.ai B. *.eps C. *.cdr D. *.wmf 43.下图中哪几项可以打开平滑与整平工具?...

    VB 控件属性大全 和大家分享

    **功能描述**:ComboBox(组合框)控件结合了列表框和文本框的功能,允许用户输入文本或从下拉列表中选择项。 **关键属性**: - **Text**: 设置或返回当前选定的项或用户输入的文本。 - **List**: 返回包含列表框中...

    vb控件属性大全

    - **Caption**: 单选按钮旁边显示的文本。 - **Value**: 控制单选按钮的状态,取值包括`0`(未选中)和`1`(选中)。 - **GroupIndex**: 设置组索引,用于分组不同的单选按钮。 #### 八、组合框控件(ComboBox)...

    上海市高校计算机等级考试一级试题A卷.pdf

    - 在旁边添加文本框和“搜索”按钮。 - **实践要点**:掌握HTML表单的基本元素,如`&lt;input type="radio"&gt;`、`&lt;input type="text"&gt;`和`&lt;button&gt;`等。 5. **水平线与超链接**: - 添加水平线,设置宽度为75%,高度...

    C#程序开发范例宝典.pdf(不完整)

    - **实例052**:为TextBox控件添加列表选择框 - 在文本框旁边集成下拉列表供用户选择。 #### 2.2 Button控件应用 - **实例053**:在Button按钮中显示图标 - 将图标集成到按钮中,提高美观性。 #### 2.3 ComboBox...

Global site tag (gtag.js) - Google Analytics