caixa de texto lado a lado css html
29/10/2019
0
Boas. Gostaria de saber como e que eu posso por um registar e um login lado a lado usando o css ou ate mesmo no html se possivel. aqui esta o meu codigo que interessa caso precisem.
<li class="nav-item"> \\menu registar e login que clicando me vai parar a outra parte da página <a class="nav-link js-scroll-trigger" href="#signup">Register</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#signup">Login</a> </li> <form class="form-register form-inline d-flex" method="post" action=""> <input type="name" type="email" class="form-input form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputName" placeholder="Username" name="name"> <input type="password" class="form-input form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputPassword" placeholder="Password" name="password"> </form> <form class="form-register form-inline d-flex" method="post" action=""> <input type="name" class="form-input form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputName" placeholder="Username" name="name"> <input type="email" class="form-input form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputEmail" placeholder="Email" name="email"> <input type="password" class="form-input form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputPassword" placeholder="Password" name="password"> <input type="password" class="form-input form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputPassword" placeholder=" Confirme a Password" name="*"> <button type="submit" class="btn btn-primary mx-auto">Registar</button> </form> <form class="form-login form-inline d-flex" method="post" action=""> <input type="name" class="form-input form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputName" placeholder="Username" name="name"> <input type="password" class="form-input form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputPassword" placeholder=" Password" name="*"> <button type="submit" class="btn btn-primary mx-auto">Login</button> </form>
André
Curtir tópico
+ 0
Responder
Posts
14/03/2020
Allan
Se você estiver usando Bootstrap4, basta você colocar os dois forms dentro de uma linha ( row ) e usar o colunamento automático:
Segue seu código atualizado:
Segue seu código atualizado:
<li class="nav-item"> \\\\menu registar e login que clicando me vai parar a outra parte da página <a class="nav-link js-scroll-trigger" href="#signup">Register</a> </li> <li class="nav-item"> <a class="nav-link js-scroll-trigger" href="#signup">Login</a> </li> <form class="form-register form-inline d-flex" method="post" action=""> <input type="name" type="email" class="form-input form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputName" placeholder="Username" name="name"> <input type="password" class="form-input form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputPassword" placeholder="Password" name="password"> </form> <div class="row"> <div class="col"> <form class="form-register form-inline d-flex" method="post" action=""> <input type="name" class="form-input form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputName" placeholder="Username" name="name"> <input type="email" class="form-input form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputEmail" placeholder="Email" name="email"> <input type="password" class="form-input form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputPassword" placeholder="Password" name="password"> <input type="password" class="form-input form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputPassword" placeholder=" Confirme a Password" name="*"> <button type="submit" class="btn btn-primary mx-auto">Registar</button> </form> </div> <div class="col"> <form class="form-login form-inline d-flex" method="post" action=""> <input type="name" class="form-input form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputName" placeholder="Username" name="name"> <input type="password" class="form-input form-control flex-fill mr-0 mr-sm-2 mb-3 mb-sm-0" id="inputPassword" placeholder=" Password" name="*"> <button type="submit" class="btn btn-primary mx-auto">Login</button> </form> </div> </div>
Responder
Clique aqui para fazer login e interagir na Comunidade :)