让文本框和按钮在同一水平线上

页面显示中,经常性的,文本框和按钮不再同一水平线上,让页面显得不好看,查询资料,和尝试下,得到下面一种解决方法:
采用浮动和设置高度
先让文本框左浮动,按钮左浮动,让两者的上边界在同一水平线上,
再设置按钮的高度,让其和文本框一样高,那么两者就可以在同一条水平线上了

下方是一个例子:

<select style="Float:left;height:30px">
    <option value="1">root</option>
    <option value="2">admin</option>
</select>
<input type="button" style="Float:left;height:30px" value="确认转发"/>

得到的效果:
这里写图片描述

这样就好了

注意,浮动后中使用  来空格是没有用的,暂时本人还不知道是什么原因,知情者,欢迎分享
可以采用这样的方式进行空格显示:
用白色文字来代替空格,注意也要浮动

<select style="Float:left;height:30px">
    <option value="1">root</option>
    <option value="2">admin</option>
</select>

<font style="color:white;Float:left"></font>

<input type="button" style="Float:left;height:30px" value="确认转发"/>

这里写图片描述

============2015/8/13 补充

有时候,因为用了浮动,会导致后文的样式出问题,这里又在找到一种方式,不用浮动,让其文本框和按钮水平对齐:

<input type="text" name="foo" value="Test Field"/> 
<input type="button" value="nihao" style="position:absolute;height:30px" />

按钮的样式中改为如图中所写,可以让文本框和按钮的上边框对齐,之后再让两者的高度一样,那么就会对齐了
这里写图片描述

有可能IE会出现按钮图像比文本框高一个像素,可以这样处理:

<input type="text" name="foo" value="Test Field"/> 
<input type="button" value="nihao" style="position:absolute;+margin-top:1px;height:30px" />

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

===================2015/8/17

今天使用时又发现一种方式,使用table让文本框和按钮水平对齐:
将控件放入td中,要想能方便的调整成水平,在td中再包含 div,调整div的高度让其高度大于文本框的高度一样,会发现,按钮和文本框中间对齐了,但是还是没有达到水平对齐,此时,就去调整按钮的line-height,就可以达成水平对齐
eg:

<table>
    <tr>
        <td ><input type="text" id="keyword" name="keyword"/></td>

        <td><div style="height:40px"> <input type="button" style="line-height:24px" onclick="searchkeyword()" value="搜索"/></div></td>

        <td><div style="height:40px"><input type="button" style="line-height:24px" onclick="deleteselectall()" value="批量清除"/></div></td>

        <td><div style="height:40px"><input type="button" style="line-height:24px" onclick="deleteAll()" value="清除全部日志"/></div></td>

    </tr>
</table>

这里写图片描述

  • 5
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值