HTML / CSS «float: right» вызывает перемещение формы вне строки

Question

Я пытаюсь выровнять форму по строке текста в HTML. И строка текста, и форма отображаются встроенными, но всякий раз, когда я перемещаю форму вправо, она, по-видимому, перемещается вниз и выходит за пределы текста. Я не знаю, что является причиной этого, так как, когда он не плавает, он отображается идеально в линию. Спасибо!

Проблема:

<li class="list-group-item">
    <a href="/home.php">Home</a>
    <div style="float: right;">
        <form action="/signup.php" method="post" style="display: inline !important;">
            <button type="submit" class="btn btn-primary">Home</button>
        </form>
    </div>
</li>

<li class="list-group-item">
  <a href="/home.php">Home</a>
  <div style="float: right;">
    <form action="/signup.php" method="post" style="display: inline !important;">
      <button type="submit" class="btn btn-primary">Home</button>
    </form>
  </div>
</li>

Answer 1

.row {
  display: flex;
  justify-content: space-between;
}

<ul>
  <li class="list-group-item">
    <div class="row">
      <a href="/home.php">Home</a>
      <form action="/signup.php" method="post">
        <button type="submit" class="btn btn-primary">Home</button>
      </form>
    </div>
  </li>
</ul>

Используйте flex вместо float .Вы можете легко достичь результата, задав justify-content: space-Между для гибкой коробки.Также удалите style = "display: inline! Важный;"из элемента формы.Пожалуйста, смотрите фрагмент кода.