我在我的 opencart 网站上有自定义无线电输入选项。这些选项带有隐藏的输入，并且在 div 中，如果选择了选项，将有边框。
这是其中 2 个选项的代码：
label {
width: 100%;
height: 100%;
display: block;
}
input[type="radio"] {
position: absolute;
top: 20px;
left: 50%;
}
input[type="radio"]:checked + .squareBase {
border: grey 2px solid;
outline: black 3px solid;
}
.radio{
width:50px;
}
.squareBase{
width: 30px;
height: 30px;
margin-bottom: 10px;
}
input{
display:none;
}<div class="radio">
<label>
<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
<div class="squareBase accessible">XL</div>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="option[<?php echo $option['product_option_id']; ?>]" value="<?php echo $option_value['product_option_value_id']; ?>" />
<div class="squareBase accessible">XXL</div>
</label>
</div>我希望此选项成行（而不是垂直）。我该怎么做？