html - 如何将单选按钮水平放置?
问题描述
单选按钮是垂直的,我需要水平的,我该怎么做?
这是我的代码:
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>
雇员
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;}
请帮忙
解决方案
根据您的解释,您希望将单选按钮及其标签放在同一行中。您必须删除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>
推荐阅读
- python - Flask:在启动时插入一些测试数据?
- javascript - 根据环境以角度 4 动态更改 url
- wordpress - Woocommerce 优惠券免除定制费
- jquery - 在 SVG rgraph 中添加附加列以显示条形图的值
- smtp - 在 GitLab 11.4.4-ee 中更改通知邮件发件人姓名
- java - 进行二进制搜索时出现 java.lang.ArrayIndexOutOfBoundsException 错误?
- javascript - Typescript - 如何提取对象数组中的对象?
- php - 更改年份时找不到php抛出页面中的日历
- php - CI中的MySQL PHP查询
- python - 如何根据 csv 文件条目的数量动态创建 tkinter 按钮