Heim > Artikel > Web-Frontend > 求input，button对齐技巧_html/css_WEB-ITnose
求input，button对齐技巧_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:12:461173Durchsuche
求input，button对齐技巧
<!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><title>button</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css"> *{padding:0;margin:0} body{padding:30px;} .search{ height:50px; line-height:50px; background-color:tan; }</style></head><body> <div class="search"> <label>Input your key words</label> <input type="text" name="hello"/> <a href="javascript:;"><button>submit</button></a> </div></body></html>
回复讨论(解决方案)
避免使用button元素吧，用input type="button"代替。
<div class="search"> <label for="hello">Input your key words</label> <input type="text" name="hello" id="hello" /> <input type="button" value="submit" /> </div>
可以写样式的嘛，定义一下input的宽高就行了。
设置统一样式
font-family:Arial,sans-serif,Tahoma; /*规定同一字体*/
font-size:12px; /*规定同一字体大小*/
height:25px; /*解决Safari和Chrome下的高度问题*/
line-height:15px; /*协调height，让文字居中*/
overflow:visible; /*只有设置这个属性IE下padding才能生效*/
padding:0 0.5em; /*chrome、ff默认值；调整其值，让IE和其他浏览器的一样*/
加上
input,button{ vertical-align:middle} 试试 设置成居中就行了呗
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：新手建站求助，进来吧，得分很容易的。_html/css_WEB-ITnoseNächster Artikel：求 2种 图片滚动效果 源代码。_html/css_WEB-ITnose