ホームページ > 記事 > ウェブフロントエンド > 入力とボタンの配置を探すtips_html/css_WEB-ITnose
入力とボタンの配置を探すtips_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:12:461173ブラウズ
入力とボタンの配置スキルを求めています
<!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>
入力の幅と高さを定義するだけで、スタイルを記述することができます。
統一スタイルを設定します
font-family:Arial,sans-serif,Tahoma; /*同じフォントを指定します*/
font-size:12px; /*同じフォントサイズを指定します*/
height:25px ; /* Safari と Chrome での高さの問題を解決します*/
line-height:15px; /* テキストを中央に配置するように調整します*/
overflow:visible; /* この属性が設定されている場合、パディングは IE でのみ有効になります。 */
padding:0 0.5 em; /*Chrome、ff のデフォルト値; IE を他のブラウザと同じにするために値を調整します*/
input,button{ vertical-align:middle} を追加してみてください 中央に設定するだけです
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。