如何在一行中添加两个单选按钮？答案

【问题标题】：How to add two radio buttons in a single row?如何在一行中添加两个单选按钮？
【发布时间】：2022-01-23 23:16:54
【问题描述】：

我想将两个单选按钮添加为带有标签的单行，如图所示，我可以实现吗？？

【问题讨论】：

【解决方案1】：

这里是如何解决您的问题的示例。

label {
  display: block;
  color: #7d7d7d;
}

.floatBlock {
  margin: 0 1.81em 0 0;
}

.labelish {
    color:#7d7d7d;
    margin: 0;
}

.paymentOptions {
    border: none;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    break-before: always;
    margin: 0 0 3em 0;
}

#purchaseOrder {
    margin: 0 0 2em 0;
}

 <p class="labelish">Payment Method:</p>
            <div id="paymentContainer" name="paymentContainer" class="paymentOptions">

                <div id="payCC" class="floatBlock">
                    <label for="paymentCC"> <input id="paymentCC" name="paymentType" type="radio" value="CREDIT_CARD" />  Credit Card  </label>
                </div>

                <div id="payInvoice" class="floatBlock">
                    <label for="paymentInv"> <input id="paymentInv" name="paymentType" type="radio" value="INVOICE" /> Invoice </label>
                </div>

                <div id="pay3rdParty" class="floatBlock">
                    <label for="payment3rd"> <input id="payment3rd" name="paymentType" type="radio" /> Third Party </label>
                </div>

            </div>

注意：取自 codepen 的想法

【讨论】：

感谢@freelanceing 心态的帮助

【解决方案2】：

你需要 display: flex; 来做这个：

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  justify-content: space-around;
  padding: 16px;
}

.radio-container {
  display: flex;
  margin-right: 15px;
}

.radio-group {
  display: flex;
  justify-content: end;
  flex-direction: column;
}

<div class="container">
  <div class="radio-container">
    <p>radios 1</p>
    <div class="radio-group">
      <label><input type="radio" name="group1" />radio 1</label>
      <label><input type="radio" name="group1" />radio 2</label>
    </div>
  </div>
  <div class="radio-container">
    <p>radioss 2</p>
    <div class="radio-group">
      <label><input type="radio" name="group2" />radio 1</label>
      <label><input type="radio" name="group2" />radio 2</label>
    </div>
  </div>
  <div class="radio-container">
    <p>radioss 3</p>
    <div class="radio-group">
      <label><input type="radio" name="group3" />radio 1</label>
      <label><input type="radio" name="group3" />radio 2</label>
    </div>
  </div>

</div>

【讨论】：

点击标签不起作用....
哦，对不起，让我修复它，我的错
顺便说一句，您可以通过为输入提供相同的名称来对输入进行分组，也许您只想从所有 6 个输入中选择一个，如果是这样，请给它们全部相同的名称
名字？你读过文档吗？
是的名字，是的，我读过doc