如何为所有3个单选按钮保留500px的左边距
如何为所有3个单选按钮保留500px的左边距
提问于 2020-01-08 20:44:16
我想为所有3个单选按钮留下500px的左边距。如何做到这一点？请看截图。
代码如下：
<html>
<head>
</head>
<body>
<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/>
<label for="rd1">radio 1</label><br/>
<input type="radio" name="user_level" id="rd2" value="2"/>
<label for="rd2">radio asdfg</label><br/>
<input type="radio" name="user_level" id="rd3" value="3"/>
<label for="rd3">radio</label><br/>
<style>
label{
padding:5px;
font-family:corbel,sans-serif;
font-size: 14px;
margin-left:10px;
}
</style>
</body>
</html>
回答 5
Stack Overflow用户
发布于 2020-01-08 20:48:34
你可以用一个div包住它，并为这个div编写一个css。它将移动您的单选按钮内容，以满足您的需求。
label {
padding: 5px;
font-family: corbel, sans-serif;
font-size: 14px;
margin-left: 10px;
}
#radioBtn {
margin-left: 100px;
}<div id="radioBtn">
<input checked="checked" type="radio" name="user_level" id="rd1" value="1" />
<label for="rd1">radio 1</label><br />
<input type="radio" name="user_level" id="rd2" value="2" />
<label for="rd2">radio asdfg</label><br />
<input type="radio" name="user_level" id="rd3" value="3" />
<label for="rd3">radio</label><br />
</div>
Stack Overflow用户
发布于 2020-01-08 20:50:37
将你的内容压缩到一个div中并添加margin-left:500px。
建议
如果屏幕宽度为320px，您将面临对齐问题，而不是像25%一样使用%，这将自动对齐您的内容。
label {
padding: 5px;
font-family: corbel, sans-serif;
font-size: 14px;
margin-left: 10px;
}
.margin-left {
margin-left: 500px
}<div class="margin-left">
<input checked="checked" type="radio" name="user_level" id="rd1" value="1" />
<label for="rd1">radio 1</label><br/>
<input type="radio" name="user_level" id="rd2" value="2" />
<label for="rd2">radio asdfg</label><br/>
<input type="radio" name="user_level" id="rd3" value="3" />
<label for="rd3">radio</label><br/>
</div>
第二种方法
您可以通过以下方法将radio button放置在页面的中心。
label {
padding: 5px;
font-family: corbel, sans-serif;
font-size: 14px;
margin-left: 10px;
}
.margin-left {
width: 200px;
height: 100px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}<div class="margin-left">
<input checked="checked" type="radio" name="user_level" id="rd1" value="1" />
<label for="rd1">radio 1</label><br/>
<input type="radio" name="user_level" id="rd2" value="2" />
<label for="rd2">radio asdfg</label><br/>
<input type="radio" name="user_level" id="rd3" value="3" />
<label for="rd3">radio</label><br/>
</div>
Stack Overflow用户
发布于 2020-01-08 20:51:14
由于label和input元素都没有初始边距，您可以将显示设置为inline-block (例如)，然后它就可以工作了。
代码片段：
label, input {
display: inline-block;
margin-left: 500px;
}<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/>
<label for="rd1">radio 1</label><br/>
<input type="radio" name="user_level" id="rd2" value="2"/>
<label for="rd2">radio asdfg</label><br/>
<input type="radio" name="user_level" id="rd3" value="3"/>
<label for="rd3">radio</label><br/>
另一种解决方案(就像前面提到的所有其他答案一样)是用块元素包装它们，然后可以像这样添加padding-left：
div {
padding-left: 100px;
}<div>
<input checked="checked" type="radio" name="user_level" id="rd1" value="1"/>
<label for="rd1">radio 1</label><br/>
<input type="radio" name="user_level" id="rd2" value="2"/>
<label for="rd2">radio asdfg</label><br/>
<input type="radio" name="user_level" id="rd3" value="3"/>
<label for="rd3">radio</label><br/>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59646144
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号