如何在一行中添加兩個單選按鈕？-有解無憂

我想在帶有標簽的單行中添加兩個單選按鈕，如圖所示，我可以實作這個嗎？

如何在一行中添加兩個單選按鈕？

uj5u.com熱心網友回復：

這是如何解決您的問題的示例。

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的想法

uj5u.com熱心網友回復：

你需要display: flex;這個：

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

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

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

.input {
  display: flex;
  flex-direction: row;
}

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

</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/419654.html

標籤：

上一篇：Expo<Camera>組件在移動設備上的Web上不起作用

下一篇：如何通過檢查特定欄位是否以給定陣列中的值開頭來查詢？