React.jsで二つのフォームをインライン指定したい

Question

React.jsでコンポーネントを組み込むとき、例えば一番上の階層、Topコンポーネントに二つのコンポーネントを描画したとします。

仮にそれらをAフォームを定義したAコンポーネント、そしてBフォームを定義したBコンポーネントとします。

私の想定では、それらを描画して見れば、Aコンポーネントに定義されたAフォームの横に、Bコンポーネントに定義したBフォームが描画されているはずなのですが、

これらの要素はボックス要素となり、した並びに描画されてしまいます。二つのフォームを横並びにする方法はありますでしょうか？何卒ご教授よろしくお願いいたします

Answer 1

ソースコードがないので確実なことはいえないのですが、コンポーネントの一番外側のタグが div になっていませんか？

もしそうでしたら、

• div を span に変更する
• style に display: inline を追加する

などで想定通りの見た目になるかと思います。

Comments

[keys]

アドバイスいただきありがとうございます。display:inline-flex; で実装できました！