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渲染组件，但我怀疑这是特定于材质设计精简版。

谢谢！

Answer 1

覆盖css＆＃39; display：block＆＃39;显示：内联块＆＃39;在className =＆＃34; mdl-textfield__input＆＃34;

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

1 个答案: