为什么我的JSX元素尺寸没有减小？

Question

I have two JSX elements: one is an image and the other is a form. I'm putting them in a span because I want them next to each other, but for some reason, the div container with the form fills up the entire width of the window and renders below the image. When I use inline styling, it reduces the size of the form, but the entire container remains too large. This is what I have:

<span>
 <Logo />
 <SearchComponent
  style={{ width: "500px" }}
 />
</span>

The code for the form in the component is:

<form onSubmit={this.handleSubmit}>
 {this.getForm()}
 <input
  type="submit"
  value={this.getValue()}
 />
</form>

And this is what my output looks like (container highlighted for clarity):

Answer 1

As 2pha says, divs normally displays as block element. Even you put both component inside the span, it seams you wrapped the SearchComponent using <div> element.

You can try to add style display:inline-block to your wrapper div as 2pha mentioned in the comment. Otherwise you can try to wrap your component using <span> tag instead of <div> .

PS: If you you are using bootstrap or some kind of CSS framework you can try to use the grid system to easily put it in the same row and also make it more responsive.