Heim > Web-Frontend > HTML-Tutorial > 求input,button对齐技巧_html/css_WEB-ITnose

求input,button对齐技巧_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:12:46
Original
1210 Leute haben es durchsucht

求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>
Nach dem Login kopieren


回复讨论(解决方案)

避免使用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>
Nach dem Login kopieren

可以写样式的嘛,定义一下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} 
Nach dem Login kopieren
试试

设置成居中就行了呗

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage