2016-11-29 16 views
0

span要素を持っていれば、display: blockというスタイルを適用すると親コンテナの全幅にすることができますが、要素がbuttonの場合は同じことは起こりません。 質問は、なぜですか?なぜボタンが違うのですか(私が正しく覚えていれば、それはブロック要素です)ボタン要素がスパンのようにコンテナの幅いっぱいになるのはなぜですか?

私はボタンにwidth:100%を適用することで修正しましたが、なぜそれが違うのかは分かりません。テストのための

フィドル:https://jsfiddle.net/9k3pjy9e/1/

+0

ブラウザは、ボタンを含むいくつかの要素にデフォルトのスタイルを追加します。それらを無効にすることはできますが、そうしないと、ブラウザに適した方法で表示されます。ボタンの場合、大部分のブラウザは値に基づいた幅(インライン要素に非常に似ています)といくつかのパディングとボーダーを持っている必要があります。これにより、ボタン要素がカスタムスタイルなしですぐにボタンのように見えるようになります。前の章で述べた答えを確認することを忘れないでください。コメント – mizurnix

答えて

0

ボタン: = inline-block「デフォルトでは、ボタンの大きさは、そのテキストコンテンツ(同じ広その内容など)によって決定された幅を変更するにはwidthプロパティを使用します。ボタンの。

More info here

スパン: = inlineインライン要素は新しい行で開始し、のみ必要な限り幅を占めていません。

セットそれ、その後display: block;へ:

ブロック要素:ブロックレベル要素は常に新しい行で開始し、利用可能な全幅を占め(右限り、それはできる限り左に広がっと)。

したがって、これはspan要素で動作しますが、button要素の場合はを設定する必要があります。

+0

私は誰かがあなたの答えをダウン投票したと思うのですが、理由は、**ボタン**の要素が**スパン**の要素とは異なる動作をしている理由を説明していないからです。 –

+0

ありがとうございましたBill、正直言って私は重複を遵守しなかったのでダウン投票したと思いますが、率直に言ってこの特定のケースでは広すぎます。私はもう少し磨きをかけようとしましたが、明確にすることができれば幸いです。よろしく。 – Syden

+0

それは本当にうまくいくかもしれません。私は裸の票を嫌う。 –

関連する問題