caixa de texto lado a lado css html

29/10/2019

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:

<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

Gostei + 0