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>

我如何水平放置单选按钮？

1 个答案: