html按钮和标签同一行,html - 如何在一行中将单选按钮与标签，图例和字段集对齐

因此，我正在为我的项目创建一个驱动程序注册表格，我需要在单行中对齐这些单选按钮的帮助。我尝试使用Clear：两者；方法以及下面提到的方法：

form label[for="yes"],

form label[for="yes"] + input,

form label[for="no"],

form label[for="no"] + input {

clear: none;

width: auto;

}

但是什么都没有用:(。我也尝试使用段落标记，但是那也没有用。

这是代码段：

body{ margin: 0; padding: 0; font-family: sans-serif; background: #34495e; } .box{ width: 300px; padding: 40px; position: absolute; top: 80%; left: 50%; transform: translate(-50%,-50%); background: #191919; text-align: center; } .box h1{ color: white; text-transform: uppercase; font-weight: 500; } select > option{ background: #191919; color: white; } .box textarea{ height: 75px; } .box label[for="Male"], .box label[for="Male"] + input, .box label[for="Female"], .box label[for="Female"] + input, .box label[for="Other"], .box label[for="Other"] + input, .box input[type = "radio"] { display: inline; clear: none; width: auto; } .box input[type = "text"],.box input[type = "password"], .box select, .box input[type = "tel"], .box textarea, .box fieldset, .box input[type = "radio"]{ border:0; background: none; display: block; margin: 20px auto; text-align: center; border: 2px solid #3498db; padding: 14px 10px; width: 200px; outline: none; color: white; border-radius: 24px; transition: 0.25s; } .box input[type = "text"]:focus,.box input[type = "password"]:focus,.box select:focus, .box input[type = "tel"]:focus, .box textarea:focus{ width: 280px; border-color: #2ecc71; } .box input[type = "submit"]{ border:0; background: none; display: block; margin: 20px auto; text-align: center; border: 2px solid #2ecc71; padding: 14px 40px; outline: none; color: white; border-radius: 24px; transition: 0.25s; cursor: pointer; } .box input[type = "submit"]:hover{ background: #2ecc71; }

My Example