使用Materialize.css并排显示登录和注册表格

Question

我有两种形式用于使用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> 

Answer 2

使用的电源图书馆。

<div class="container"> 
    <div class="row"> 
     <form id="" action="" method="" role="form" class="col s12"> 
     <div class="row" 
     <div class="input-field col s6"> 
      <input type="" name="" id="" class="validate" value=""> 
      <label for=""></label> 
     </div> 
     <div class="input-field col s6"> 
      <input type="" name="" id="" class="validate" value="" > 
     </div> 
    </div> <!-- closes row --> 
    <div class="row col s12"> 
     <button class="btn waves-effect waves-light" type="submit" name="action">Submit 
     <i class="material-icons right">send</i> 
    </button> 
    </div> 

，还可以使用的材料日历，你拨弄你省略。不需要在html标签中使用自定义样式。这是该库的优点，如果需要定制元素，请使用功能las。