html - 需要帮助弄清楚如何正确定位按钮

Question

我目前正在为我的编程课开发一个问答游戏。大多数事情都按预期工作，但我不知道如何正确定位按钮 时间。

按钮移出它的空间: Trivia Game Button Error

这让我有点困惑，因为它在上传到 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>

我几乎没有使用任何额外的 CSS

.noHover{
    pointer-events: none;
}

.h1Margin {
    margin-bottom: 4rem;
}

您可以在 github 上找到整个游戏

我很想知道如何才能更好地正确定位按钮。

谢谢大家!

Answer 1

对于按钮，您可以使用相对位置，然后从顶部或底部(左侧或右侧)给出相对位置，以放置在您想要的任何位置。