Question

我想将两个收音机盒及其标签对齐成水平线但Chrome浏览器会按下第二个单选按钮并标记到下一行。以下是代码：

  <li>
      <p> 
         <label for="request" id="officallabel">Purpose</label> 
         <input type = "radio"
             name = "approvalbuttons"
             id = "approved"
             value = "Approved"
        <label for = "approved">Approved</label>

        <input type = "radio"
             name = "approvalbuttons"
             id = "denied"
             checked = "checked" 
             value = "denied" />
      <label for = "denied">Denied</label>
     </p>
   </li>

CSS代码 input [type =“radio”] { margin-right：0; }

Answer 1

您有以下错误：

您无法在<p>标记内嵌套任何类似表单元素的内容。将其替换为<div>标记。
您尚未关闭<input />。

使用此代码段：

<li>
  <div> 
    <label for="request" id="officallabel">Purpose</label> 
    <input type = "radio"
           name = "approvalbuttons"
           id = "approved"
           value = "Approved" />
    <label for = "approved">Approved</label>

    <input type = "radio"
           name = "approvalbuttons"
           id = "denied"
           checked = "checked" 
           value = "denied" />
    <label for = "denied">Denied</label>
  </div>
</li>

将HTML5单选按钮放在水平线中

1 个答案: