html - 使用 Materialize.css 并排显示登录和注册表单

Question

我有 2 个注册和登录表单，它们是使用 Materialize.css 创建的。但我试图并排显示它，如果我这样做，它的响应会受到干扰。

https://jsfiddle.net/samson421/or7mbt3x/

     <nav>
     <div class="nav-wrapper light-blue darken-3" >


     <a href="#" class="brand-logo">&nbsp;&nbsp;hello.com</a>
     <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons"></i></a>
    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">About Us</a></li>
      <li><a href="badges.html">Our Team</a></li>
      <li><a href="collapsible.html">Login</a></li>
    </ul>

    <ul class="side-nav" id="mobile-demo">
      <li><a href="sass.html">About Us</a></li>
      <li><a href="badges.html">Our Team</a></li>
      <li><a href="collapsible.html">login</a></li>
    </ul>


   </div>
   </nav><br><br>

  <div class="indexcon" style="margin-left:80px;width:500px">
   <div class="row">   
    <form class="col s12">
      <div class="row" id="fname">
        <div class="input-field col s4">
            <i class="material-icons prefix"></i>
            <input id="icon_prefix" type="text" class="validate">
            <label for="icon_prefix">First Name</label>
        </div>          
      </div>     

  <div class="row" id="lname">
    <div class="input-field col s4">
      <i class="material-icons prefix"></i>
      <input id="icon_prefix" type="text" class="validate">
      <label for="icon_prefix">Last Name</label>
     </div>
   </div>      

 <div class="row">
    <div class="input-field col s4">
      <i class="material-icons prefix"></i>
      <input id="icon_prefix" type="email" class="validate">
      <label for="icon_prefix">Email ID</label>
    </div>
 </div>

<div class="row">
    <div class="input-field col s4">
      <i class="material-icons prefix"></i>
      <input id="icon_prefix" type="password" class="validate">
      <label for="icon_prefix">Password</label>
    </div>
</div>


 <div class="row">
    <div class="input-field col s4">Date of Birth
      <input type="date" class="datepicker">
     </div>
 </div>


 <p>
    <input name="group1" type="radio" id="test1" />
    <label for="test1">Male</label>
 </p>

 <p>
    <input name="group1" type="radio" id="test2" />
    <label for="test2">Female</label>
 </p>


 <button class="btn waves-effect waves-light" type="submit"   name="action">Register
  <i class="material-icons right"></i>
 </button><br><br>

  </form>    
 </div>

   <div class="indlog" style="width:400px">
     <div class="row" id="lname">
       <div class="input-field col s4">
        <i class="material-icons prefix"></i>
      <input id="icon_prefix" type="text" class="validate">
      <label for="icon_prefix">Username</label>
    </div>

    </div>   

     <div class="row">
      <div class="input-field col s4">
        <i class="material-icons prefix"></i>
        <input id="icon_prefix" type="password" class="validate">
        <label for="icon_prefix">Password</label>
      </div>

     <button class="btn waves-effect waves-light" type="submit" name="action">Login
      <i class="material-icons right"></i>
      </button><br><br>
     </div>

    </div>

Answer 1

您只需要将两种形式都放入另一行，分成两列，就像这个例子:

<div class=" row" >
<form> // form 1
<div class="col s6">
<div class="row">
    <div class="input-field col s12">
      <input id="password" type="password" class="validate">
      <label for="password">Password</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input id="email" type="email" class="validate">
      <label for="email">Email</label>
    </div>
  </div>
 </div>
</form>
<form> // form 2
 <div class="col s6">
 <div class="row">
    <div class="input-field col s12">
      <input id="password" type="password" class="validate">
      <label for="password">Password</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input id="email" type="email" class="validate">
      <label for="email">Email</label>
    </div>
  </div>
 </div>
 </form>
 </div>