CODEWITHSUNDEEP
htmlcssreactjs
Ant
Ant

Reputation: 1143

How can I make different React components display 'inline'?

I have different React components I would like to display all in the same line, like in a sentence.
The problem now is that there is a break before and after the components.
(The components <RegisterModal/> and <LoginModal/> elements are just words that trigger a popup.)

My React code...

<ToastBody className="logInline">
  Please <RegisterModal/> or <LoginModal/> to Upload
</ToastBody>

The CSS...

.logInline {
  display: inline;
  float:left;
}

The result...

enter image description here

The desired result (shopped)...

enter image description here

display: flex almost gets it done, but it is wonky with the heights.

enter image description here

Upvotes: 1

Views: 502

Answers (3)

Muhammad Ali
Muhammad Ali

Reputation: 2648

Try

.logInline {
  display: flex;
  align-items: center;
}

It will move children in a row and align them vertically in center. Explicitly add spaces if you need them by either using {' '} or &nbsp;

Upvotes: 1

Strikegently
Strikegently

Reputation: 2441

You need to add the display: inline CSS to the components you want inline.

<ToastBody>
  Please <RegisterModal className="logInline"/> 
    or <LoginModal className="logInline"/> to Upload
</ToastBody>

Upvotes: 0

Nico Shultz
Nico Shultz

Reputation: 1872

cant know for sure because we dont have the full code but if you change your css to this it will probably resolve your problem

.logInline {
  display: flex;
}

Upvotes: 1

Related Questions