submitボタンの横幅を小さくしたいです。

質問

私はCGIゲームを作っているのでsubmitボタンを沢山使うのですが、
8文字くらいのボタンだと横幅が広くなります(空白)
filefoxでは横の空白がぴったりに表示されますがIEのみ駄目です。
私は英語版PCを使用しているので、日本語版PCと表示が異なります。
CSSで指定すると日本語版PCでは一部が表示されなかったりと
不具合が多いです。どう指定すればボタンの横の空白がけせるでしょうか？
アドバイスできる方お願いします

回答No.6

abril · ベストアンサー

ANo.3です。

> CSSでやってみたのですが、効果がありませんでした。…

実際にIE6.0/7.0、Firefox2.0～、Opera9.25 on Windows XPでの表示結果を検証してみました。やはり記憶通り、IE6.0/7.0では、サブミットボタンの左右paddingはvalueの文字数によって相対的に増え、"padding: 0;"と定義しても効くのは（質問者様も確認済みの通り）上下方向のみ、左右は8文字ぐらいのデータ量では0にすることはできませんでした。

> 1個1個にやるのは大変なので、CSSのやり方はありますか？

共通のプロパティに関しては一括指定ができますが、文字数によって幅をぴったりにしたいとなると、上記のIEの仕様により、ANo.5の回答者様も仰っている様にやはりそれぞれのボタンにユニークなidをつけて識別してやる必要があるので、結果として1つ１つの対処という事にならざるを得ません。
以下はサンプルです。書式はXML宣言ありのXHTML1.1です。
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
input.button {
font-size: 12px;
padding: 0;
}
input#hoge8 {
width: 8em;
}
input#hoge6 {
width: 6em;
}
input#hoge4 {
width: 4em;
}
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
<form method="post" action="#">
（省略）
<ul class="submit">
<li><input class="button" type="submit" id="hoge8" name="hoge8" value="このデータを送る" /></li>
<li><input class="button" type="submit" id="hoge6" name="hoge6" value="再度確認する" /></li>
<li><input class="button" type="submit" id="hoge4" name="hoge4" value="次へ進む" /></li>
</ul>
</form>
----------------------------------------------------------------------
上記はサンプルはid毎にvalueの文字数に併せてwidthを変えています。ただ、8文字の場合は上記環境で丁度ぴったりぐらいの幅になるのですが、6文字以下ぐらいから逆に右端が切れる様な感じで表示されてしまいます。必ずしも1em＝1文字とはならないので、IEでの見た目にこだわるならやはりその都度微調整して行くしかないと思います（6文字の場合はちょっと多めに6.5emぐらいにしておく、とか…）。

CSSとHTMLのみを使用し<input type="submit"～>での実装となるとこれが限界だと思います。後は他の回答者様もアドバイスしている様な、<input type="image"～>の使用に変える、もしくはインライン要素／display: inline;に変えたブロック要素（自動的にテキスト量に合わせた幅になりますので個別にwidthを定義する必要がありません）にボタン風に見えるスタイルを定義してJavaScriptを仕込んでonclickで送信する、という様な別の方法を取るしかないかと。

回答No.5

kuzumiHK

No.2です。
CSSでまとめて指定するには、
サブミットボタンを使用するときに常にdivで囲っていてユニークのidがふられている場合か、
submitボタン自体に特定のclassかidが設定されている必要があります。

また、秀丸や、EmEditorの有料版、Dreamweaverなどで、
全ファイルをgrep検索して、
「 type="submit"」を「 type="submit" class="submitbtn"」のようにに置換すれば、
まとめて指定することが可能です。
CSSには
input.submitbtn{padding:～;}
と記述すればOKです。

もし、完全に見た目を統一したい場合は、
<input type="image" src="test.gif">を使って
アンチエイリアスOFFの画像にしてみるというのはいかがでしょうか。
ただしこの場合、
type="submit"の値をチェックするようなスクリプトの場合、
スクリプトのほうで対応策が必要になるかもしれません。

回答No.4

SAYKA

ちょっとした(javascriptを使った)邪道なやり方だけど
普通にbox描画をしてそれにonClickで対応するという方法もあるよ。

inputの描画じゃなく普通のbox描画ならぴっちりになるでしょ？

回答No.3

abril

> 8文字くらいのボタンだと横幅が広くなります(空白)
> filefoxでは横の空白がぴったりに表示されますがIEのみ駄目です。

今外からの覗き見でIE on Windowsでの検証ができる環境にいないので、記憶で申し上げますが、確かIEでは<input type="submit"～>の左右の余白は一定ではなくvalueで表示される文字数に依存し広がる、という謎の仕様になっていたかと。なので「横の空白を消す」となると、CSSで左右paddingを0にしても効かなかったと記憶しています。
ちょっとググって出てきた下記参考URLに様々な環境での<input type="submit"～>の見え方を検証・一覧にした表がありますが、やはりここの"Button 11"のスタイルが"padding: 0;"になっているにも関わらず、IE6 on Windowsでは自動的に左右余白を与えられている様に見えます。
http://www.456bereastreet.com/lab/form_controls/buttons/

IEでの余白を消すには、（ANo.2の回答者様のサンプルにもあります様に）<input type="submit"～>にwidthを決め打ちする様なスタイルを与えるぐらいしか方法がないかと。
※ただ現実問題としては、内容（文字数）によっていちいち別のスタイルを与えるのは非効率この上ないと思いますが。

回答No.2

kuzumiHK

↓1emが一文字分なので、emでwidthを指定すれば、文字が拡大しても追従します。
<input type="submit" value="送信" style="width:5em">

前述の方がおっしゃっているようにpaddingなら細かい指定ができます。
↓上下左右に1文字分余白
<input type="submit" value="送信" style="padding:1em">
↓左右のみに1文字分余白
<input type="submit" value="送信" style="padding:0 1em">
↓上1em、右2em、下3em、左4emの余白
<input type="submit" value="送信" style="padding:1em 2em 3em 4em">
↓pxでもOK
<input type="submit" value="送信" style="padding:10px">

補足

CSSでやってみたのですが、効果がありませんでした。…
1個1個にやるのは大変なので、CSSのやり方はありますか？
以下の通りは試してみましたが、効果なしでした。
padding:1px;
padding:1em;
padding:1 1 1 1em;
padding 1 1 1 1px;
padding:1em 1em 1em 1em;
padding:1px 1px 1px 1px;

なお、CSSでは効果がないと記述しましたが、縦方向の余白には効果がありました。
ボタンそのものに記述したら完全に成功はしました。

回答No.1

SAYKA

ボタンも実はboxの一種だから　padding　辺りを指定したらどうかな。