Question

我使用以下代码和按钮＆amp;创建了单选按钮。文本彼此相邻。这很好，但它不是垂直中间对齐文本输入字段，它放在单选按钮上。

<div class="col-md-3">
    <div id="edit-donation-frequent" class="form-radios form-group">
        <div class="form-item form-type-radio form-item-donation-frequent">
            <input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio" />  
            <label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
         </div>
    </div>
</div>
<div class="col-md-3">
    <div class="form-item form-type-radio form-item-donation-frequent form-group">
        <input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio" />  
        <label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
    </div>
</div>

PAGE IS HERE

我放.form-item label.option { vertical-align: middle; }但结果仍然相同。然后我尝试了margin-top和其他一些css样式，但无法得到我想要的东西。

我希望两个单选按钮（每月，一次和固定电话）看起来像是截图。

和

如何像屏幕截图一样调整页面。

[UPDATE]

根据Rachel的请求获得部分（行）的代码（无论如何，通过访问this page，您可以查看源代码）：

<div class="row">
    <div class="col-md-3">
        <div class="form-item form-type-textfield form-item-donation-amount form-group">
            <input type="text" id="edit-donation-amount" name="donation_amount" value="" maxlength="128" class="form-text form-control" placeholder="Amount"/>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-item form-type-select form-item-donation-currency form-group">
            <select id="edit-donation-currency" name="donation_currency" class="form-select form-control">
                <option value="DKK">DKK</option>
                <option value="GBP">GBP</option>
                <option value="USD">USD</option>
                <option value="EUR">EUR</option>
            </select>
        </div>
    </div>
    <div class="col-md-3">
        <div id="edit-donation-frequent" class="form-radios form-group">
            <div class="form-item form-type-radio form-item-donation-frequent">
                <input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio" />  
                <label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
             </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-item form-type-radio form-item-donation-frequent form-group">
            <input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio" />  
            <label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
        </div>
    </div>
</div>

Answer 1

好的，首先你需要像使用每月/一次字段一样将周围的div放在Land线元素周围，并且还要为每月/一次制作包装器，以便它们是相同的

<div class="row">
    <div class="col-md-3">
        <div class="form-item form-type-textfield form-item-donation-amount form-group">
    <input type="text" id="edit-donation-amount" name="donation_amount" value="" maxlength="128" class="form-text form-control" placeholder="Amount">
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-item form-type-select form-item-donation-currency form-group">
    <select id="edit-donation-currency" name="donation_currency" class="form-select form-control">
      <option value="DKK">DKK</option>
      <option value="GBP">GBP</option>
      <option value="USD">USD</option>
      <option value="EUR">EUR</option>
    </select>
    </div>
    </div>
    <div class="col-md-3">
        <div id="edit-donation-frequent" class="form-radios form-group">
            <div class="form-item form-type-radio form-item-donation-frequent">
            <input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio">  
            <label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
        </div>
    </div>
    </div>
    <div class="col-md-3">
  <div id="" class="form-radios form-group">
        <div class="form-item form-type-radio form-item-donation-frequent form-group">
        <input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio">  
        <label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
        </div>
</div>
        </div>

和

<div class="col-md-4">
  <div class="form-item form-type-radio form-item-donation-frequent form-group">
    <input type="radio" id="edit-donation-land-line" name="landline" value="landline" class="form-radio">  
    <label class="option font-size-sixteen" for="edit-donation-land-line">Land Line</label>
    </div>
</div>

然后创建一个新的CSS规则

.form-item.form-type-radio {
    padding-top: 0.5em;
    margin-top: 0;
}

这应该可以解决您的问题。希望有所帮助

如何对齐此引导单选按钮？

1 个答案: