最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to place two input fields side by side in react - Stack Overflow

programmeradmin1浏览0评论

I have 3 input fields, the first one I want by itself, but the next two I need side by side. So far I tried to add a className row to the ones that need to be side by side, but they still show up below each other

 {pillTabs.selected === 4 && (
                <div>
                   <div className="row"> //need the ones in this div side by side
                   <Input
                    label="Name"
                    type="text"
                    placeholder="Enter name"
                    inputId="basicInput"
                    value={name}
                    onChange={e => this.setState({ name: e.target.value })}
                  ></Input>
                  <Input
                    label="Label"
                    type="text"
                    placeholder="Enter label"
                    inputId="basicInput"
                    value={name}
                    onChange={e => this.setState({ name: e.target.value })}
                  ></Input>
                   </div>
                </div>
                  )}

Is it possible to get them side by side without using an external library like bootstrap?

I have 3 input fields, the first one I want by itself, but the next two I need side by side. So far I tried to add a className row to the ones that need to be side by side, but they still show up below each other

 {pillTabs.selected === 4 && (
                <div>
                   <div className="row"> //need the ones in this div side by side
                   <Input
                    label="Name"
                    type="text"
                    placeholder="Enter name"
                    inputId="basicInput"
                    value={name}
                    onChange={e => this.setState({ name: e.target.value })}
                  ></Input>
                  <Input
                    label="Label"
                    type="text"
                    placeholder="Enter label"
                    inputId="basicInput"
                    value={name}
                    onChange={e => this.setState({ name: e.target.value })}
                  ></Input>
                   </div>
                </div>
                  )}

Is it possible to get them side by side without using an external library like bootstrap?

Share Improve this question edited Feb 1, 2021 at 22:53 asked Feb 1, 2021 at 18:06 user14985872user14985872 3
  • This sounds like a styling issue, not a React or JavaScript issue. What styling is being applied to these elements? What CSS rules have you written to change their styling? Looking at the resulting HTML along with the CSS being applied to it is likely to be more useful debugging than just looking at the JSX code. – David Commented Feb 1, 2021 at 18:09
  • What about using a TABLE? That's what I normally do – ControlAltDel Commented Feb 1, 2021 at 18:10
  • You should look into using material-ui or add bootstrap (only really need the css). Both frameworks have grid systems that make handling spacing and alignment very easy. – Nicholas_Jones Commented Feb 1, 2021 at 19:38
Add a ment  | 

1 Answer 1

Reset to default 3

You can use flex from CSS like:

.side-by-side {
  display: flex;
  flex-direction: row;
}

<div>
  <Input1 />
  <div className="side-by-side">
    <Input2 />
    <Input3 />
  </div>
</div>
发布评论

评论列表(0)

  1. 暂无评论