ホンダフリードの運転手左足前がフラットになったら4台欲しい。村野小春さんと大きな新居で赤ちゃんも作り結婚祝いも欲しい。L-570の100周年版とD2RとDST-Lacertaと特注スピーカーも欲しい。: 携帯入力フォームとボタンを横一列に並べる。ずれないです。

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

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

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

どこにでもありそうな、よくある入力フォーム。
テキストボックスとボタンを横一列に並べたい場合、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ソースで実現できます。

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

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

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

2009年09月24日