jQuery Mobileで input text タグを横並びにしたい
はまった。おおはまり。なにがしたいかというと、jQuery Mobileでinput textタグを横並びにしたいだけ。例えば、郵便番号の入力で前3桁と後4桁を別々のinputで入力したいときなど。<input type="text" name="zip3"><input type="text" name="zip4">を横に並べたいだけ。実は別システムで実現していて、サンプルコードがあった。そこには、styleシートでinput[name="zip3"]{ width: 4em; display: inline-block;}input[name="zip4"]{ width: 4em; display: inline-block;}となっているだけ。簡単だね。・・・・・・今のシステムの移植と・・・・・できねぇ。うーん。どういうことだ?違うスタイルが影響しているのか?悩み続けた・・・・・・悩み続けた・・・・・・悩み続けた・・・・・・悩み続けた・・・・・・悩み続けた・・・・・・悩み続けた・・・・・・悩み続けた・・・・・・GiveUp上のスタイルを作った人に教えを請いました。で判明上のサンプルは、jquery.mobile-1.2.1.min.jsでした。移植するシステムは、jquery.mobile-1.4.1.min.jsでした。つまり、上記のやり方は、jquery.mobileで自動作成されたスタイルを無理やり変更することになるのであるが、その自動されたスタイルがjquery.mobileのバージョンによって異なっていた。でこんな感じでできました。styleシートで.yoko >.ui-input-text{ width:5em; display:inline-block;}HTMLは<div class="yoko"><input type="text" name="zip3"><input type="text" name="zip4"></div>つまり、jquery.mobileのバージョンが変わったらレイアウトが崩れるとういことだけど、とりあえずこれで。