Question

我有以下用于单选按钮的html，我还添加了css

   <br/><br/>
                <input type="radio" id="radio1" name="radios" value="CC" checked>
   <label for="radio1">Credit Card</label>
                    <br><br>
                        <br/><br/>
<input type="radio" id="radio2" name="radios"value="DB">
<label for="radio2">Debit Card</label>
    <br><br>

它的CSS是

/*
  Hide radio button (the round disc)
  we will use just the label to create pushbutton effect
*/
input[type=radio] {
    display:none; 
    margin:10px;
}

/*
  Change the look'n'feel of labels (which are adjacent to radiobuttons).
  Add some margin, padding to label
*/
input[type=radio] + label {
    display:inline-block;
    margin:-2px;
    padding: 4px 12px;
    background-color: #e7e7e7;
    border-color: #ddd;
}
/*
 Change background color for label next to checked radio button
 to make it look like highlighted button
*/
input[type=radio]:checked + label { 
   background-image: none;
    background-color:#d0d0d0;
}

但单选按钮不会在一行中对齐

这是jsfidlle http://jsfiddle.net/8ew6g/3/

继承人http://jsfiddle.net/8ew6g/9/ [已解决]

单选按钮位于支付模式标签下方，我已经应用了一些css，所以它看起来不像一个基本的拉比按钮

Answer 1

<强>更新： This resource也可能有用，因为它使用类似的代码，结果是内联的。

我建议您遵循此建议，然后使用fieldset中的标题包装代码。这将允许您制作图例，因此您的代码将如下所示：

<fieldset>
    <legend><strong>Payment Mode- Select your payment mode</strong></legend>
    <input type="radio" id="radio1" name="radios" value="all" checked>
    <label for="radio1">Credit Card</label>
    <input type="radio" id="radio2" name="radios" value="false">
    <label for="radio2">Debit Card</label>
</fieldset>

您还需要将其添加到CSS中：

fieldset {
    border: none;
}

<击> 你可以试试这个：

<table> <tr> <td> <input type="radio" id="radio1" name="radios" value="CC" checked /> <label for="radio1">Credit<nobr/> Card</label> </td> <td> <input type="radio" id="radio2" name="radios" value="DB"> <label for="radio2">Debit<nobr/> Card</label> </td> </tr> </table>

为了确保这两行之间的界限没有中断，这是我在你的小提琴上尝试时发生的。

您的HTML相当混乱，特别是div元素被标记为table和row，所以我不确定该怎么做。我对推荐table犹豫不决，特别是考虑到这一点，所以也许你应该考虑除了使用完全假的单选按钮之外还有什么可以做的。

Answer 2

删除单选按钮之间的两个<Br />标记并用<div>包裹单选按钮，并将其宽度增加到约180px 像：

      <div style="width:180px;">             
<input type="radio" id="radio1" name="radios" value="CC" checked>
<label for="radio1">Credit Card</label>
<input type="radio" id="radio2" name="radios"value="DB">
<label for="radio2">Debit Card</label>
        </div>`

无法将单选按钮设为单行

2 个答案: