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 。 您可以通过在flex框中提供justify-content：space-between来轻松实现结果。 同时删除style =“display：inline！important;” 来自表单元素。 请参阅代码段。