物料UI输入与选择对齐
物料UI输入与选择对齐
提问于 2018-04-11 21:26:03
我有一些关于如何在材料UI上对齐我的元素的问题。
这是我的Input和Select元素的代码：
<div>
<form>
<TextField
label="Search"
/>
<FormControl>
<InputLabel htmlFor="age-simple">Age</InputLabel>
<Select
value=""
onChange=""
inputProps={{
>
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</form>
</div>这是我得到的输出：
回答 1
Stack Overflow用户
发布于 2018-04-13 15:03:38
您可以使用flexbox对齐多个表单域。您只需要将display: flex添加到父元素中。在下面的示例中，我使用了内联样式，但您可以使用任何the supported style solutions。
您的代码中还有一个错误：inputProps={{缺少右括号：}}
const { React, ReactDOM } = window
const { InputLabel, FormControl, TextField, MenuItem, Select } = window['material-ui']
const Form = () => (
<form style={{ display: 'flex' }}>
<TextField label="search" />
<FormControl>
<InputLabel htmlFor="age-simple">Age</InputLabel>
<Select value="">
<MenuItem value="">
<em>None</em>
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
</form>
)
ReactDOM.render(<Form />, document.querySelector('#root'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script><script src="https://unpkg.com/material-ui@1.0.0-beta.40/umd/material-ui.production.min.js"></script><div id="root"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49776378
复制相关文章
相似问题
腾讯云开发者
