javascript - 将 CSS 分配给 元素

Question

我想将 CSS 添加到 DIV 元素，这样我就可以将其右对齐，并在其左侧直接放置一个表单。我正在制作 2048 的破解版。我的 HTML 代码是:

    <div id="completetwentyfourtyeightgame" align="right">
        <div class="container">
            <div class="heading">
                <div class="scores-container">
                    <div class="score-container">0</div>
                    <div class="best-container">0</div>
                </div>
                <div class="above-game">
                    <a class="restart-button">New Game</a>
                </div>
            </div>
            <div class="game-container">
                <div class="game-message">
                    <p></p>
                    <div class="lower">
                        <a class="keep-playing-button">Keep going</a>
                        <a class="retry-button">Try again</a>
                    </div>
                </div>
                <div class="grid-container">
                    <div class="grid-row">
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                    </div>
                    <div class="grid-row">
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                    </div>
                    <div class="grid-row">
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                    </div>
                    <div class="grid-row">
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                        <div class="grid-cell"></div>
                    </div>
                </div>
                <div class="tile-container"></div>
            </div>
        </div>
    </div>

        <div align="left">
        <form id="inputs">
            <table border="1">
                <tr>
                    <th>Tile Value 1</th>
                </tr>
                <tr>
                    <th>
                        <input type="text" id="tilevalueone" value="2">
                    </th>
                </tr>
                <tr>
                    <th>Tile Value 2</th>
                </tr>
                <tr>
                    <th>
                        <input type="text" id="tilevaluetwo" value="4">
                    </th>
                </tr>
                <tr>
                    <th>Starting Score</th>
                </tr>
                <tr>
                    <th>
                        <input type="text" id="score" value="0">
                    </th>
                </tr>
                <tr>
                    <th>Tile Value To Win</th>
                </tr>
                <tr>
                    <th>
                        <input type="text" id="winpoints" value="2048">
                    </th>
                </tr>
            </table>
        </form>
    </div>

我的 CSS 是:

.completetwentyfourtyeightgame{
position: absolute;
right: 0px;
}

代码有什么问题？它是在我的 HTML 中还是在我的 CSS 中？这是代码正在执行的操作的屏幕截图:

不是 table 直接在左边，游戏在右边，而是 table 在游戏下面。 After changing the . to a # in the css, this happens

如果网站和表格紧挨着游戏的左边界，我不希望游戏处于边缘。另外，有没有办法让 javascript 重新加载游戏以在不重新加载页面本身的情况下应用这些值？

Answer 1

应该是:

#completetwentyfourtyeightgame在您的 CSS 中。

你有它作为 .completewentyfourtyeightgame

这是因为以 . 开头，表示一个新的 CSS 类。要使用 id 定位某些内容 - 正如您在 HTML 中声明的那样 - 您需要使用 #