opencart使单选按钮成行

Question

我的 opencart 网站上有选项的自定义无线电输入。这些选项带有隐藏输入，并且位于 div 中，如果选择了选项，将有边框。

这里是其中两个选项的代码：

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>

我希望这个选项在行中（不是垂直的）。我该怎么做？

Answer 1

您可以将两个单选选项都包含在一个框内，并为其提供 flex 显示，默认情况下会在一行中显示子框。

只需使用以下代码更新您的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;
}

opencart使单选按钮成行

opencart make radio buttons in row

html

css

styles

radio-button

opencart