ど素人から毛を生やす。<延>

floatなボタンを下揃えしようとしたら思いのほか苦戦した話。

Web > css 2018年3月2日(最終更新:7月前)

どもです。
フォームのCSSは永遠の課題感あります。

インラインブロック要素であるボタンが2つ以上並んでいて、サイズが違うものがある。
このとき、ボタンを下揃えで並べたい。

通常は、ボタンにvertical-align:bottom;でおk
インラインな要素なら、普通はこれで解決できます。

が、
事情があって、このボタンはfloat:right;されているのです。

具体的には、このボタンたちはフォームのsubmit用ボタンで、
フォームをエンターしたときは一番前に記述したsubmitのイベントが発生するけれど、
一番右のボタンのイベントを発生させたいためにfloat:rightで並び順を逆にしているのです。

この状態ではvertical-align:bottom;が意味を成しません。要素が全て上付きになってしまいます。
どーしよう。

①margin-top調整できないか ←ブラウザ差異によって失敗。

ブラウザ差異

あ゛あ゛あ゛あ゛あ゛あ゛ぁ(怒)

calc()で調整できないかなーとも思ったのですが、
そもそもボタンのデフォルトデザインが違うから親のdivの高さが違くなって、ダメですな!もう!

ん? ボタンのデフォルトデザインが違うからdivの高さが違くなる??

あ、そうか。

ボタンの高さが違うから差異になるんだ。
逆に言えば、ボタンの高さが同じなら差異は起きない。

②ボタンの高さを定めてしまえばどうとでもなる。

ボタン群の親{
	text-align:right;
	height:3em;
	line-height:3em;
	overflow:hidden;
}
button{
	box-sizing:border-box;
	height:3em;
	float:right;
}
button.smallButton{
	font-size:0.8em;
	height:2em;
	vertical-align:bottom;
	float:none;
}

こうすればvertical-align:bottom;が効くし、margin-topで調整することもできるじゃないか。

差異解決

ほらー!!

こーいうことが起きるので、新規サイトならいっそ
ボタンのデザインはデフォルトから変えてしまうのがGood!ですな!

また僕の前に立ちはだかるか、IE。

IEだとこうなる。

ボタンの中の文字がline-heightに従って押し広げられるよう。

まぁ、

致命的ではないし。

IEはもうサポート外で、いいかな。

追記:そもそもdisplay:flex使えばこんなことに悩む必要ないじゃん!


<div style="display:flex; flex-direction:row-reverse; align-items:flex-end;">
	<button type="button" style="font-size:1.2em; margin-left:4px">大きいボタン</button>
	<button type="button" style="font-size:0.8em;">小さいボタン</button>
</div>


レイアウトのためにfloatを使う時代は終わったんや!(;'∀')

参考:[Qiita]CSS3 Flexbox 位置の揃え方まとめ

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)