CSS ReactJS 水平对齐 material-ui 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35995511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS align material-ui elements horizontally
提问by erichardson30
I am trying to have a radio button next to a text input so essentially a user can input "answers" to a question and mark one preferred. However, Material-UI puts each on it's own line.
我试图在文本输入旁边有一个单选按钮，因此基本上用户可以输入问题的“答案”并标记为首选。但是，Material-UI 将每个都放在自己的行上。
This is what I currently have :
这是我目前拥有的：
<div>
<RadioButton
value="light"
/>
<TextInput
hintText="Answer"
multiLine = {true}
/>
</div>
采纳答案by roboli
Just for the record, I managed to align radio buttons using flexboxgrid... Did something like this:
只是为了记录，我设法使用flexboxgrid对齐单选按钮......做了这样的事情：
<div className="row">
<div className="col-md-2">
Type:
</div>
<div className="col-md-10">
<RadioButtonGroup
className="row"
name="type">
<RadioButton
className="col-md-4"
value="other"
label="Other" />
<RadioButton
className="col-md-4"
value="custom"
label="Custom" />
</RadioButtonGroup>
</div>
</div>
回答by Chris Hartwig
I'm using react-inline-gridfor layout with material-ui, it helps solve many problems and makes code more explicit about layout (plus it's reactive).
我正在使用react-inline-grid与 material-ui 进行布局，它有助于解决许多问题并使代码关于布局更加明确（而且它是反应性的）。
<Grid>
<Row is="nospace start">
<Cell is="9 tablet-6 phone-3">
<TextField ... />
</Cell>
<Cell is="middle 3 tablet-2 phone-1">
<RaisedButton ... />
</Cell>
</Row>
</Grid>
回答by WitVault
You have a styleobject available to override the default styles of the element in Material-Ui.
Use that and set display to inline-block.
您有一个style对象可用于覆盖 Material-Ui 中元素的默认样式。使用它并将显示设置为内联块。
display: inline-block;
