Question

默认情况下，输入的收音机和标签不是显示在同一行吗？我积极搜索了如何将它们放在同一行中的主题，但是我的标签显示在单选按钮下方一行。

这是html：

<div class = "buttons">
    <div class="group1">
        <div>
            <input id="op1" class="radio" checked="checked" name="options" type="radio" value="op1" />
            <label for="op1"> option1 </label>
        </div>
        <div>
            <input id="op2" class="radio" name="options" type="radio" value="op2" />
            <label for="op2"> option2 </label>
        </div>
    </div>
    <div class="group2">
        <div>
            <input id="op3" class="radio" name="options" type="radio" value="op3" />
            <label for="life_expectancy"> option3 </label>
        </div>
        <div>
            <input id="op4" class="radio" name="options" type="radio" value="op4" />
            <label for="normal"> option4 </label>
        </div>
        <div>
            <input id="op5" class="radio" name="options" type="radio" value="op5" />
            <label for="effective"> option5 </label>
        </div>
    </div>
</div>

仅出于整体理解的目的，我附加了CSS。但是我只使用CSS为标签上色，每个标签使用不同的颜色。

此外，我的标签与无线电按钮不在同一行的问题独立于flex。我使用flex是因为我想以这种方式显示选项：

    op1        op2 
op3         op4         op5

即使没有felx，标签也不会与单选按钮显示在同一行中。

label[for="op1"] {
  color: #d0e562;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
  opacity: 0.8;
} 

label[for="op2"] {
  color: #ffae33;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;
  opacity: 0.8;
} 

label[for="op3"] {
  color: #662c91;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px; 
  opacity: 0.8;
} 

label[for="op4"] {
  color: #F15F36;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;    
  opacity: 0.8;
}

label[for="op5"] {
  color: #19A0AA;
  font-size: 12px;
  font-weight: 600;
  border-radius: 10px;  
  opacity: 0.8;
}  

.buttons {
  display: flex; 
  flex-direction: column; 
}

.group1 {
  display: flex; 
  justify-content: space-evenly;
  flex-direction: row;
}

.group2 {
    display: flex; 
    justify-content: space-evenly;
    flex-direction: row;
}

肯定有我所缺少的东西。您能告诉我如何在按钮旁边显示标签吗？

Answer 1

您在flex-direction:column类上应用了button，因此有两行。

Answer 2

要在列中显示按钮，删除.group1和.group2类的CSS样式。

.group1 {}

.group2 {}

然后它们将全部位于同一行（1列）。

单选按钮及其标签不在同一行

2 个答案: