Html 需要帮助了解如何正确定位按钮吗

我目前正在为我的编程课做一个琐事游戏。 大多数事情都按预期进行，但我不知道如何正确定位按钮时间

按钮将移出其空间：

这让我有点困惑，因为它在上传到github之前工作得非常好。我也无法解决这个错误

下面是HTML代码，其中包括bootstrap4类：

    <div class="col-md-4">
        <button type="button" class="btn btn-primary mb-2" id="buttonHit">Start the Game </button>
        <button class="btn btn-primary mb-2 float-right noHover">Time: <span class="badge badge-primary" id="time">00:30</span></button>
        <div class="list-group" id="list-tab" role="tablist">
            <a class="list-group-item list-group-item-action active question" id="question" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Click "Start" to start the game</a>
            <a class="list-group-item list-group-item-action answerBtn1 answerBtn" id="answer1" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile"></a>
            <a class="list-group-item list-group-item-action answerBtn2 answerBtn" id="answer2" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages"></a>
            <a class="list-group-item list-group-item-action answerBtn3 answerBtn" id="answer3" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings"></a>
            <a class="list-group-item list-group-item-action answerBtn4 answerBtn" id="answer4" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings"></a>
        </div>
    </div>

你可以在上面找到整个游戏

我很想知道我能做得更好，以正确定位按钮

---

谢谢大家

对于按钮，您可以使用相对位置，然后给出从顶部或底部（左或右）到任意位置的相对位置。

它似乎完全按照您的指示操作：

• 容器是

  col-md-4

• 时间按钮向右浮动

我不知道你希望事情看起来如何，但你可以通过以下两种方式使它看起来更好：

将

#列表选项卡

设置为浮动元素（

清除：两者；

）

通过从时间按钮中移除

右浮动

类来解除时间按钮的浮动

---

我知道你不想要什么，但你希望按钮的外观/位置如何？很有意义。我只是不明白为什么它不与下面的元素对齐。我希望左边的按钮与左边对齐，右边的按钮与右边对齐。但是现在右边的按钮太远了…为什么它会飘得这么远？它可以正确地飘（一直飘到容器的右侧）。当您将一个图元浮动到一侧时，默认情况下，下一个图元将远离浮动图元创建的垂直空间。您可以使用

clear

属性更改该行为。

.noHover{
    pointer-events: none;
}

.h1Margin {
    margin-bottom: 4rem;
}