Question

我有一个基本的电子邮件捕获表单但我无法找出CSS以防止在显示错误消息时提交按钮移动：http://imgur.com/RbXLN6l

我正在使用React.js构建它，并尝试使用flexboxes，在顶部对齐列的内容。以下是我的组件中的html代码段，我使用material-ui作为文本字段并提交按钮：

 <div className='row'>
   <form className='registration' onSubmit={this.handleSubmit}>
     <div className='column'>
       { !this.props.registered && 
        <TextField
         hintText='example@domain.com' 
         errorText={this.props.errorText}
         value={this.props.email} 
         onChange={this.handleChange}
         onKeyDown={this.handleKeyDown}
       /> }   
     </div>
     <div className='column'>
       { this.props.verifying &&
        <CircularProgress 
          size={25} 
          visible={this.props.verifying} 
          color={grey500} 
        /> }
       { !this.props.verifying && !this.props.registered &&              
        <RaisedButton type='submit' label='Submit'
       /> }
     </div>
   </form>
   <style jsx>{`
     .row {
       display: flex;
     }
     .column {
       flex: 1;
       padding: 1rem;
       display: inline;
       vertical-align: top;
     }
  `}</style>
 </div>

以下是渲染标记的截图：https://imgur.com/a/zx19v。看起来列div位于正确的位置，但代替的标记仍然向下滑动。

非常感谢任何帮助！

Answer 1

确保按钮位于另一个div中，然后只有float: left两个容器，您可以看到实时示例here，另一个选项是使display : inline-box与vertical-align: top }}

两种方式都会在容器上给你一个独立的行为

在div调整大小之前防止div向下移动

1 个答案: