1. ホーム
  2. ハイパーリンク

[解決済み】ボタンを右寄せで配置する

2022-04-02 14:59:15

質問

私はこのコードを使って、ボタンを右寄せにしています。

<p align="right">
  <input type="button" value="Click Me" />
</p>

しかし <p> タグはスペースを浪費するので、同じように <span> または <div> .

解決方法は?

どのアライメント手法を使うかは状況によって異なりますが、基本的なものは以下の通りです。 float: right; :

<input type="button" value="Click Me" style="float: right;">

しかし、おそらくフロートをクリアしたくなるでしょうが、それは overflow:hidden を親コンテナで使用するか、あるいは明示的に <div style="clear: both;"></div> をコンテナの底に置く。

例えば http://jsfiddle.net/ambiguous/8UvVg/

フローティング要素は、通常のドキュメントの流れから外れるので、親の境界をオーバーフローして親の高さをめちゃくちゃにすることができます。 clear:both CSSがその面倒を見ます(同様に overflow:hidden ). 私が追加したJSFiddleの例で、フローティングとクリアがどのように動作するかを試してみてください( overflow:hidden ただし、最初に)。