求form的样式有关问题
日期：2014-05-17 浏览次数：20640 次
求form的样式问题
本不想提这种问题，花了一天的时间还是没有解决，只好求助各位。
如题就是如何把文本框和文字及按钮调整到一个水平线上。谢谢，在线等。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.left { float: left; }
#search { line-height: 28px; background: repeat-x; height: 35px; border: 1px solid #b5d4fc; padding: 0 10px; }
</style>
</head>
<body>
<form name="form_search" id="form_search" action="" method="get" class="left" style="height:28px; text-align:center;">
<span style=" height:20px; padding-bottom:15px;">站内搜索：</span>
<input type="text" style="margin-bottom:7px;"/>
<input name="" type="button" value="搜 索" onclick="searchtype()";style=" text-align:center; height:30px; padding-bottom:5px;"/><a href=" " ><img src="images/center_03.png" alt="" style="height:32px; margin-left:200px" /></a>
</form>
</body>
</html>
------解决方案--------------------
你这个本来就在同一水平线啊。。
------解决方案--------------------
ie9。。ff。。。safari..vs运行。。这3个浏览器全在同一水平线上
------解决方案--------------------
楼主你可以看看这篇文章：http://blog.csdn.net/nx8823520/article/details/6045003
这个是导致加了图片后失效的原因，解决办法很简单，你可以给图片加个vertical-align:middle 属性或者定义属性的margin上线边距为高度一半
------解决方案--------------------
vertical-align:middle 只适用于表格。和图文混排 调这种是没有效果的。
要用具体的值vertical-align:-10px 或者10px这种具体的值来调。主要的楼主CSS写的太乱。
form里面写了height28px span里面又用了padding-bottom 又撑大了高度。导致他们都基线对齐。
本不想提这种问题，花了一天的时间还是没有解决，只好求助各位。
如题就是如何把文本框和文字及按钮调整到一个水平线上。谢谢，在线等。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.left { float: left; }
#search { line-height: 28px; background: repeat-x; height: 35px; border: 1px solid #b5d4fc; padding: 0 10px; }
</style>
</head>
<body>
<form name="form_search" id="form_search" action="" method="get" class="left" style="height:28px; text-align:center;">
<span style=" height:20px; padding-bottom:15px;">站内搜索：</span>
<input type="text" style="margin-bottom:7px;"/>
<input name="" type="button" value="搜 索" onclick="searchtype()";style=" text-align:center; height:30px; padding-bottom:5px;"/><a href=" " ><img src="images/center_03.png" alt="" style="height:32px; margin-left:200px" /></a>
</form>
</body>
</html>
------解决方案--------------------
你这个本来就在同一水平线啊。。
------解决方案--------------------
ie9。。ff。。。safari..vs运行。。这3个浏览器全在同一水平线上
------解决方案--------------------
楼主你可以看看这篇文章：http://blog.csdn.net/nx8823520/article/details/6045003
这个是导致加了图片后失效的原因，解决办法很简单，你可以给图片加个vertical-align:middle 属性或者定义属性的margin上线边距为高度一半
------解决方案--------------------
vertical-align:middle 只适用于表格。和图文混排 调这种是没有效果的。
要用具体的值vertical-align:-10px 或者10px这种具体的值来调。主要的楼主CSS写的太乱。
form里面写了height28px span里面又用了padding-bottom 又撑大了高度。导致他们都基线对齐。
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
