css で横並びにする方法

Question

containerのなかにinline-blockの要素が三つ横並びになっています。
閉じるの要素を右端に配置したくtext-align:rightを指定しましたがみぎに配置されませんでした。
margin-auto: leftも指定しましたが適応されませんでした。
text-alignやmargin-autoで位置を指定するやり方はinline-block要素には効かないのでしょうか？
わかる人いましたらご教授お願いしたいです。

<div class="container">
  <img src='icon.svg'/>
  <p style={{display: 'inline-block'}}>　一覧　</p>
  <div style={{display: 'inline-block'}}> 閉じる　</div>
</div>

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

こんにちは。

いろいろ勘違いされているかと思います。

---

margin-autoというプロパティはありません。おそらくmargin-left: autoの間違いではないかと思います。

---

text-alignはその要素の内部にあるテキストに効きます。
ですので、<div style={{display: 'inline-block'}}> 閉じる　</div>にtext-align: rightを適用すると、その内部のテキストである「 閉じる　」が<div style={{display: 'inline-block'}}></div>に対して右寄せされる、ということです。
<div style={{display: 'inline-block'}}></div>自体は右寄せされません。

---

inline-blockの水平方向はこのように決められています。

If 'width' is 'auto', the used value is the shrink-to-fit width as for floating elements.

A computed value of 'auto' for 'margin-left' or 'margin-right' becomes a used value of '0'.
10.3.9 'Inline-block', non-replaced elements in normal flow | Visual formatting model details

（勝手訳）もし'width' が 'auto' である場合、フロート要素のように、内容物に合わせて縮みます。'margin-left' や 'margin-right' が 'auto' である場合、0が用いられます。

ですので、マージンについては、autoは0になってしまうため意味がありません。

また、<div style={{display: 'inline-block'}}></div>は「 閉じる　」というテキストと同じ幅を持ちます。
文字列と同じ幅の中で右寄せしようと左寄せしようと、何も変わらないのはご理解いただけるかと思います。
text-align:rightに意味を持たせるためには、widthを指定する必要があります。

---

とりあえず、float:rightをお試しになってはいかがですか？

Comments

[退会済みユーザー]

詳しくありがとうございます！！！
できました

[Hogeike]

できたなら解決済みにしましょう

[退会済みユーザー]

すいません。解決済みにするのを忘れていました

[退会済みユーザー]

ありがとうございます

Answer 2

- <div class=`container`>
+ <div class="container">

Comments

[退会済みユーザー]

？？

[kyoya0819]

質問の編集ありがとうございます。
他の回答をご参照ください。おそらく解決します。