材质UI输入与Select对齐

Question

我在元素UI上如何对齐我的元素时遇到了一些问题。

这是我的输入和选择元素的代码：

<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>

这是我得到的输出：

Answer 1

您可以使用flexbox对齐多个表单字段。您只需要将display: flex添加到父元素即可。在以下示例中，我使用了内联样式，但您可以使用the supported style solutions中的任何一个。

您的代码中也有错误：inputProps={{缺少右括号：}}

＆＃13;

＆＃13;

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'))

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;