html - 对齐和间隔 Material Design Lite 文本输入字段的最佳方法是什么？

Question

我在表单中有一些 Material Design Lite 1.0.6 输入字段。这些字段位于网格单元格内的同一行，右侧有一个提交按钮。由于已知的对齐问题，该按钮目前在 Firefox 中存在问题。在 Safari/Chrome 中没问题:

<form className="frontpage">
  <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input className="mdl-textfield__input" id="email" type="email" value={this.state.email} onChange={this.handleEmailChange}/>
    <label className="mdl-textfield__label" htmlFor="email">email...</label>
    <span className="mdl-textfield__error">Input is not an email address!</span>
  </div>

  <div className="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input className="mdl-textfield__input" id="password" type="password" pattern="[A-Z,a-z,0-9\?@\$%&\*\-_=+!  ~\.,\/\\]*" value={this.state.email} onChange={this.handleEmailChange}/>
    <label className="mdl-textfield__label" htmlFor="password">password...</label>
    <span className="mdl-textfield__error">Input can only contain letters, numbers, and some special characters!</span>
  </div>

  <button className="mdl-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" type="submit" name="login" disabled>Login</button>
</form>

我确实看到了这样的标记:

<div class="mdl-layout-spacer"></div>

在某些示例中，但它似乎对水平间隔字段或按钮没有帮助。我怀疑我可能正在寻找一种方法来告诉 flexbox 如何去做，但还没有找到关于如何做的明确说明，我不确定这是否是最好的机制。控制网格单元之间的间距也很有趣……也许也可以用 flexbox 来完成。我正在使用 React 来渲染组件，但我怀疑这是特定于 material-design lite 的。

谢谢!

Answer 1

在 className ="mdl-textfield__input"中将 css 'display: block' 覆盖为 'display: inline-block'