Question

我目前正在为我的编程课程开发一个琐事游戏。大多数事情按预期工作，但我无法弄清楚如何正确定位按钮时间。

这对我来说有点混乱，因为它在将其上传到github之前工作得很好。我也无法解决此错误。

这里是HTML代码，其中包含bootstrap4类：

in_date

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

    <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>

您可以在github

找到整个游戏

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

谢谢大家！

Answer 1

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

Answer 2

它似乎完全按照你的要求去做：

容器为col-md-4
时间按钮浮动到右侧

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

将#list-tab设为clear浮动元素（clear: both;）
通过从中移除float-right类来取消时间按钮。

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

2 个答案: