如何使文本更接近输入的单选标记

Question

My css for radio input tag:

.radio-label-type {
width: 80%;
display: flex;
flex-direction: row;
justify-content: center;
}
.block-radio {
width: 50px;
}

然后，在我的表格中，我有无线电输入标签：

<div class="radio-label-type">
<input class="block-radio" type="radio" name="nodeType" id="topic" value="topic" > topic </input>
<input class="block-radio" type="radio" name="nodeType" id="author" value="author" > author </input>       
</div>

"主题"one_answers"作者"单词位于无线电输入标签旁边，但距离较近。我如何调整它们的距离，使文本更接近无线电标签？

Answer 1

您可以在CSS中使用margin-right来实现它。像这样：

<div class="radio-label-type">
<input class="block-radio" type="radio" name="nodeType" id="topic" value="topic" > topic
<input class="block-radio" type="radio" name="nodeType" id="author" value="author" > author
</div>

.radio-label-type {
width: 80%;
display: flex;
flex-direction: row;
justify-content: center;
}
.block-radio {
width: 50px;
/* Add this to decrease the text and radio button spacing*/
margin-right: -20px;
/* To increase the distance  */
/* margin-right: 20px        */
}

看看这个JSFiddle

Answer 2

通常输入标记没有结束标记，所以应该用div包装。

.radio-label-type {
width: 80%;
display: flex;
flex-direction: row;
justify-content: center;
}
.block-input {
margin-inline:20px ;
}
.block-input input{
margin-inline: 15px;
}

<div class="radio-label-type">
<div class="block-input"><input class="block-radio" type="radio" name="nodeType" id="topic" value="topic">topic
</div>
<div class="block-input"><input class="block-radio" type="radio" name="nodeType" id="topic" value="topic">author
</div>
</div>

Answer 3

您可以简单地针对输入类型并设置所需的空间。

input[type="radio"]{
margin-right: -5px;
}

<div class="radio-label-type">
<input class="block-radio" type="radio" name="nodeType" id="topic" value="topic" > topic </input>
<input class="block-radio" type="radio" name="nodeType" id="author" value="author" > author </input>       
</div>