Как выровнять p-тег с переключателем - PullRequest
0 голосов
/ 12 марта 2020

enter image description here

На изображении выше показано, как я хочу, чтобы мой вывод был. Но вместо этого я получаю это. enter image description here

Это мой код. Может кто-нибудь сказать мне, что я делаю не так.

<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>

Ответы [ 2 ]

1 голос
/ 12 марта 2020

Выполните перенастройку 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>
0 голосов
/ 12 марта 2020

Вы пробовали сетку?

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...