как я могу установить переключатель в горизонтальное положение?

Question

переключатель в вертикальном положении, и мне нужно в горизонтальном положении, как я могу это сделать?

это мой код:

HTML:

 <section>
<div class="container">
    <div class="login-form">
        <h1>Sign in</h1>
        <form method="get">
<input type="radio" name="Client" value="Clientes" onclick="this.form.action = 'ContactoTropical.html'" > Clientes <br> <br>

Empleados

CSS:

section{
width: 100%;
height: 100vh;}

.container{
    position: absolute;
    top: 55%;
    left: 50%;
    width: 340px;
    text-align: center;}

.login-form{
    position: relative;
    box-sizing: border-box;
    padding: 60px 30px;}

.login-form input{
    display: block;
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    border-radius: 25px;
    outline: none;}

пожалуйста, помогите

Answer 1

Согласно вашему объяснению, вы хотите, чтобы ваш переключатель и метка для него находились в одной строке.Вы должны удалить стиль width: 100% для ввода и использовать display: inline-block для их рендеринга в линию.

section{
width: 100%;
height: 100vh;}

.container{
    position: absolute;
    top: 55%;
    left: 50%;
    width: 340px;
    text-align: center;}

.login-form{
    position: relative;
    box-sizing: border-box;
    padding: 60px 30px;}

.login-form input{
    display: inline-block;
    padding: 10px 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    border-radius: 25px;
    outline: none;}

<section>
<div class="container">
    <div class="login-form">
        <h1>Sign in</h1>
        <form method="get">
<input type="radio" name="Client" value="Clientes" onclick="this.form.action = 'ContactoTropical.html'" >
<span>Clientes</span>
		</form>
		</div>
	</div>
</section>