在卡片

Question

我有这个html 使用materialize css

<!-- Sign Up Card row -->
<div class="row">
      <div class="col s12 m12">

        <div class="card">
          <div class="card-content">

            <span class="card-title"><h3>Sign up to find out more.</h3></span>

              <form class="container">
                <div class="input-field col m6">
                  <input id="email" type="email" class="validate">
                  <label for="email">Email</label>
                </div>

                <div class="input-field col m6">
                  <button class="btn waves-effect waves-light" type="submit" name="action">
                    Submit <i class="material-icons right">send</i>
                  </button>
                </div>

              </form>  

          </div>          
        </div>
      </div>
    </div><!-- End of Sign Up Card row -->

哪个给了我这个结果

当我从col m6 div中删除input-field类时，它会在卡片中正确显示它们，但会将其叠加在另一个上面。

如何让卡内部divs 同时位于同一行？

我想要的卡片组合的UI设计



的更新

Working JSFiddle

注意：修改css本身是不受欢迎的，也是最后的选择。主要解决方案应该只使用materialize css我认为我应该更具体。

Answer 1

使用＆lt; div class =＆＃34; row＆＃34;＆gt;＆lt; / div＆gt;包裹div.col标签

jsfiddle

 <!-- Sign Up Card row -->
            <div class="row">
              <div class="col s12 m12">
                <div class="card">
                  <div class="card-content">
                    <span class="card-title"><h3>Sign up to find out more about Two Lanterns.</h3></span>
                      <form class="container">
                        <div class = "row">

                          <div class="input-field col m6">
                            <input id="email" type="email" class="validate">
                            <label for="email">Email</label>
                          </div>
                          <div class="input-field col m6">
                            <button class="btn waves-effect waves-light" type="submit" name="action">
                              Submit <i class="material-icons right">send</i>
                            </button>
                          </div>
                        </div>
                      </form>


                  </div>

                </div>
              </div>
            </div><!-- End of Sign Up Card row -->

Answer 2

尝试这种方式，用以下代码替换容器块。

          <form class="container" style="display: flex">
            <div class="input-field ">
              <input id="email" type="email" class="validate">
              <label for="email">Email</label>
            </div>

            <div class="input-field " style="padding-left:16px">
              <button class="btn waves-effect waves-light" type="submit" name="action">
                Submit <i class="material-icons right">send</i>
              </button>
            </div>

          </form>