2015年10月10日土曜日

携帯 入力フォームとボタンを横一列に並べる。ずれないです。

8:37    No comments

引用元（勉強の為に引用させて頂きました。）:

[携帯]入力フォームとボタンを横一列に並べる

サンプル画像：入力フォーム

どこにでもありそうな、よくある入力フォーム。
テキストボックスとボタンを横一列に並べたい場合、3キャリア1ソースで実現するにはtableが必要になってきます。

tableのセルの中に入力フォームとボタンを入れないと、auで改行してしまいます。

サンプル画像：入力フォーム

tableを使っていないサンプルページ
QRコード
→サンプルページを見る

tableを使っているサンプルページ
QRコード
→サンプルページを見る

入力フォームとボタンを隣同志のセルにいれればOKです。

<table>
<tr>
<td><input type="text" size="20" style="width:160px;" /></td>
<td><input type="submit" value="検索" /></td>
</tr>
</table>

docomoとsoftbankはtableに入れなくても横一列になるんですけど、auではなぜかなりません。
入力フォームの横幅をどんなに短くしても、ボタンが改行して表示されてしまうのです。

フォームを中央揃えにするために、tableの外側のdivでtext-align:center;を指定しているのですが、softbankではそれだけだとセンタリングしてくれません。

サンプル画像：入力フォーム

よって、tableにmargin:0 auto;を指定します。

完成サンプルページ
QRコード
→サンプルページを見る

これで、検索ボックスのようなフォーム＋ボタン横一列・中央揃えが3キャリア1ソースで実現できます。

htmlの場合は？

xhtmlの場合と異なり、tableを使わずともテキストフォームとボタンを横並びにすることが可能です。

htmlのサンプルページ
QRコード
→サンプルページを見る

<div align="center">
<form action="#" method="post">
<input type="text" name="" size="10"><input type="submit" value="検索">
</form>
</div>

トラックバックURL

コメントする


匿名でも本名でもなんでも。


公開されません。


ブログやホームページなどありましたら。


コメントは承認制となっております。公開までしばらくお待ちくださいませ。

0 コメント:

コメントを投稿