Html 右浮动不能正常工作

在我的电脑屏幕的最右侧有一个评论部分。我希望评论与评论部分的右侧保持一致。我认为“向右浮动”可以做到这一点，而且在某种程度上确实如此。正如你所看到的，它可以再移动几个像素，所以它是内联的。我的CSS如下所示：

        #addCommentButton{
            float:right;
        }

HTML是这样的：

<div id="comment_container">
        <form id="comment_form">
            <input class="input line1" id="nameInput" placeholder="Name">
            <button id="addCommentButton" class="line1" type="submit">Comment</button>
            <textarea class="input" id="comment_area" placeholder="Comment here"></textarea>
        </form>
        <div id="comments"><span id="loading">Loading comments...</span></div>
</div>

评论
正在加载评论。。。

---

我不知道为什么会发生这种情况，我以前从未发生过这种情况。任何帮助都将不胜感激。

尝试将表单上的填充设置为

0px

form#comment_form {
    width: 300px;
    padding: 0px;
}

---

如我所见，您的按钮位置正确，但窗体的填充将其向左推几个像素。

尝试将窗体上的填充设置为

0px

form#comment_form {
    width: 300px;
    padding: 0px;
}

---

如我所见，您的按钮位置正确，但窗体的填充将其向左推几个像素。

这将起作用。将文本区域宽度更改为294px；以补偿左右两倍的填充和1倍的边距

<textarea class="input" id="comment_area" placeholder="Comment here" tabindex="2" style="width: 294px;"></textarea>

---

这将起作用。将文本区域宽度更改为294px；以补偿左右两倍的填充和1倍的边距

<textarea class="input" id="comment_area" placeholder="Comment here" tabindex="2" style="width: 294px;"></textarea>

或者，执行以下操作：

.comment, #comment_area, #comment_form {
    width: 300px;
    box-sizing: border-box;

}

该区域的计算宽度比声明的宽度大几个像素

框大小：边框框；，我们可以将长方体模型更改为以前的模型 一旦“古怪”的方式，其中一个元素的指定宽度和高度 不受填充或边框的影响

来源：

或者，执行以下操作：

.comment, #comment_area, #comment_form {
    width: 300px;
    box-sizing: border-box;

}

该区域的计算宽度比声明的宽度大几个像素

框大小：边框框；，我们可以将长方体模型更改为以前的模型 一旦“古怪”的方式，其中一个元素的指定宽度和高度 不受填充或边框的影响

---

来源：

我想我们做的正好相反：）我不能用这种方式工作，但nevermind的答案很好。谢谢你！我想我们只是做了完全相反的事情：）我不能用这种方式工作，但nevermind的答案很好。谢谢你！