opencart 在行中制作单选按钮答案

【问题标题】：opencart make radio buttons in rowopencart 在行中制作单选按钮
【发布时间】：2021-10-04 16:19:04
【问题描述】：

我在我的 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>

我希望此选项成行（不是垂直）。我该怎么做？

【问题讨论】：

标签： html css radio-button styles opencart

【解决方案1】：

您可以在一个盒子中包含两个单选选项，并赋予它flex display，默认情况下将盒子子项显示在一行中。

只需使用以下代码更新您的 HTML

<div class="options">
  <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>
 </div>

然后用下面的方法更新你的 CSS

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;
}
.options{
  display: flex;
}

【讨论】：