如何将p标签与单选按钮对齐

Question

上面的图像是我希望输出的样子。但是相反，我得到了这个。

这是我的代码。有人可以告诉我我在做什么错。

<p class = "one" style = "text-indent: 198pt;"><font size = "2px">*How likely is that you would recommend</p><p class = "one" style = "text-indent: 272pt;">freeCodeCamp to a friend?</font>
<form class = "f2">
        <input type = "radio" id = "1" >
        <label for = "1">Definitely</label> <br>
        <input type = "radio" id = "2" >
        <label for = "2">Maybe</label> <br>
        <input type = "radio" id = "3">
        <label for = "3">Not Sure</label> <br>
</form>
</p>

Answer 1

重新调整您的HTML以包括包装器和使用flexbox。

也：

• 不要将连续文本分成2个段落
• <font>元素已过时，不应再使用。

div {
  display: flex;
  align-items: flex-start;
  width:90%;
  margin:1em auto;
}

div * {
  flex:1;
}

p {
  text-align:right;
  margin:0;
}

<div>
  <p class = "one"> *How likely is that you would recommend freeCodeCamp to a friend?</p>
<form class = "f2">
        <input type = "radio" id = "1" >
        <label for = "1">Definitely</label> <br>
        <input type = "radio" id = "2" >
        <label for = "2">Maybe</label> <br>
        <input type = "radio" id = "3">
        <label for = "3">Not Sure</label> </form>

</div>

Answer 2

您尝试过网格吗？

.grid{
  display:grid;
  width:100%;
  grid-template-columns: auto 1fr;
}


<div class="grid">
  <div>
    <p class = "one" style = "text-indent: 198pt;">*How likely is that you would recommend</p>
    <p class = "one" style = "text-indent: 272pt;">freeCodeCamp to a friend?</p>
  </div>
  <form class = "f2">
    <input type = "radio" id = "1" >
    <label for = "1">Definitely</label> <br>
    <input type = "radio" id = "2" >
    <label for = "2">Maybe</label> <br>
    <input type = "radio" id = "3">
    <label for = "3">Not Sure</label> <br>
  </form>
</div>