inline-block要素の幅をパーセント指定した際、横並びになりません

Question

前提・実現したいこと

インラインブロック要素が横並びになりません。
なぜだか教えていただけると幸いです。

発生している問題・エラーメッセージ

spanタグをインラインブロックにした際、widthをpxで指定した場合やspanタグに
テキストを入力した際はボタン領域が広がり、横並びに表示されるのに対し、spanタグにwidth:50%や100%などパーセント指定した場合横並びにならず改行され、縦並びになります。

エラーメッセージ

該当のソースコード

<div id="container">
  <button class="btn slide-bg">
     <span></span> Button
  </button>
</div>





#container {
  text-align: center;
}

.btn {
  background-color: white;
  color: black;
  border: 1px solid black;
  padding: 10px 40px;
  margin: 50px 0;
  font-weight: 600;
  cursor: pointer;
}

.btn.slide-bg span{
  display: inline-block;
  /*width:100px*/
  width: 100%;
}

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

パーセント指定した場合は、親要素のサイズが基準になります。
width: 100%なら親要素の幅から左右パディングを引いた幅になります。
他の要素が入る隙間がなくなので当然改行され、縦並びになります。
親要素には幅が設定してないのと思われるかもしれませんが、親要素のbuttonはインラインブロック要素なので子要素に幅で決まりますので、<span>の幅と同じになります。

width: 50%でも縦並びになる場合は、他の要素が親要素の50%以上の幅があるからでしょう。
合わせると親要素の幅を超えるので改行されます。
50%よりさらに小さくしていくか、他要素(テキスト)の文字数を少なくするなどすると、横並びになります。

Comments

[Tmtm1995]

回答ありがとうございました。
とてもわかりやすく理解できました!