如何将单选按钮与相关文本对齐？

Question

我想在我的表单上放两个单选按钮。 HTML是：

<div class="container">
<form action="">
  <legend>Type your info here</legend>
  <p>
    <label>Do you have a student loan?</label>
    <input type="radio" name="loan" value="yes">Yes<br>
    <input type="radio" name="loan" value="no">No<br>
  </p>
</form>
</div>

当我运行时，结果如下：

我目前也有一些CSS，这可能会导致问题（我不知道是不是）。

.container{
  width: 500px;
  clear: both;
}

.container input{
  width: 100%;
  clear: both;
}

所以问题是：有人可以让我知道如何让按钮坐在＆＃34;是＆＃34;旁边。和＆＃34;不＆＃34;文本/标签

Answer 1

因为，你在导致你的所有输入元素中使用width:100%;。只需在输入中使用宽度100％，其类型为文本，符合您的要求：

.container input[type="text"]{
  width: 100%;
  clear: both;
}