我有2个使用Materialise.css创建的注册和登录表单。但是我试图并排显示它,如果我这样做,它的响应性就会受到干扰。
https://jsfiddle.net/samson421/or7mbt3x/
<nav>
<div class="nav-wrapper light-blue darken-3" >
<a href="#" class="brand-logo"> 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>
答案 0 :(得分:0)
您只需将两个表单放入另一行,分为2列,如下例所示:
<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>
答案 1 :(得分:0)
使用库的强大功能。
<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标记内使用自定义样式。这是库的优势,如果需要自定义元素,请使用 laas 功能。