将 label 文本和输入复选框并排对齐
[英]Align label text and input checkbox beside each other
问题描述
我有下面的代码，但是，它在浏览器中显示如下：
checkbox
yes, I give permission
我该如何解决？ 这是自然的方式吗，它永远不会对齐，我需要以不同的方式设计它； 还是一般有不同的方法来做到这一点？ 我不知道该怎么办！
label { padding: 12px 12px 12px 0; display: inline-block; color:#000; font-size:20px; font-weight:900; display: inline-block; /* width: 140px; */ text-align: right; } input { font-size: 18px; padding: 10px 10px 10px 5px; display: block; width: 300px; border: 1px solid black; border-bottom: 1px solid black; }
<label for="permission"><input type="checkbox" id="permission" name="permission" value="Yes">Yes, I give permission </label>
2 个解决方案
解决方案1
1 2021-05-19 13:51:06
给你 go...
#for_label { padding: 12px 12px 12px 0; display: inline-block; color: #000; font-size: 20px; font-weight: 900; display: inline-block; /* width: 140px; */ text-align: right; } #for_input { font-size: 18px; padding: 10px 10px 10px 5px; display: inline-block; border: 1px solid black; border-bottom: 1px solid black; }
<,DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <meta name='viewport' content='width=device-width. initial-scale=1,0'> <title>Document</title> </head> <body> <label id='for_label' for="permission"><input id='for_input' type="checkbox" id="permission" name="permission" value="Yes">Yes, I give permission</label> </body> </html>
解决方案2
1 2021-05-19 13:53:38
您在输入上使用了一个width ，它将 go 的文本放到下一行。 删除了相同的内容并添加了inline-block以将文本保留在复选框旁边。
label { padding: 12px 12px 12px 0; display: inline-block; color:#000; font-size:20px; font-weight:900; display: inline-block; /* width: 140px; */ text-align: right; } input[type=checkbox] { font-size: 18px; padding: 10px 10px 10px 5px; display: inlin-block; border: 1px solid black; border-bottom: 1px solid black; margin: 5px 10px 5px 0; }
<label for="permission"><input type="checkbox" id="permission" name="permission" value="Yes">Yes, I give permission </label>
为什么向左/向右浮动不起作用？ 尝试将照片和文本并排对齐
[英]Why does float left/right not work? Trying to align photo and text beside each other
如何将固定列的表格与内容彼此对齐的表格对齐
[英]How to align table with fixed columns and table with content beside each other
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.