如何将单选按钮水平放置

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>