span
要素を持っていれば、display: block
というスタイルを適用すると親コンテナの全幅にすることができますが、要素がbutton
の場合は同じことは起こりません。 質問は、なぜですか?なぜボタンが違うのですか(私が正しく覚えていれば、それはブロック要素です)ボタン要素がスパンのようにコンテナの幅いっぱいになるのはなぜですか?
私はボタンにwidth:100%
を適用することで修正しましたが、なぜそれが違うのかは分かりません。テストのための
フィドル:https://jsfiddle.net/9k3pjy9e/1/
ブラウザは、ボタンを含むいくつかの要素にデフォルトのスタイルを追加します。それらを無効にすることはできますが、そうしないと、ブラウザに適した方法で表示されます。ボタンの場合、大部分のブラウザは値に基づいた幅(インライン要素に非常に似ています)といくつかのパディングとボーダーを持っている必要があります。これにより、ボタン要素がカスタムスタイルなしですぐにボタンのように見えるようになります。前の章で述べた答えを確認することを忘れないでください。コメント – mizurnix