Javascript 对齐四个圆'；在CSS和HTML5中，s位于正方形内_Javascript_Css_Html_Alignment

Javascript 对齐四个圆'；在CSS和HTML5中，s位于正方形内

javascript css html

Javascript 对齐四个圆'；在CSS和HTML5中，s位于正方形内,javascript,css,html,alignment,Javascript,Css,Html,Alignment,我正在开发一个Simon Says游戏，并拥有所有可用的JavaScript等我遇到的主要问题是CSS；当你点击它时，一切都正常以下是我希望它看起来像什么的模拟图像：更新仍有对齐问题已更新我的CSS CSS: HTML: 级别：1 分数：0 容易的正常的硬的疯狂的开始您需要给您的形状一个绝对位置，并使用“顶部”、“左侧”、“右侧”和“底部”css属性，如下所示： .shape1 { position: absolute; left: 0; t

我正在开发一个Simon Says游戏，并拥有所有可用的JavaScript等

我遇到的主要问题是CSS；当你点击它时，一切都正常

以下是我希望它看起来像什么的模拟图像：

更新仍有对齐问题已更新我的CSS

CSS:

HTML:


级别：1
分数：0


容易的


正常的


硬的


疯狂的


开始

您需要给您的形状一个绝对位置，并使用“顶部”、“左侧”、“右侧”和“底部”css属性，如下所示：

.shape1 {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -50px;
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 50%;
}

请注意，边距顶部用于稍微偏移“顶部”属性。边界半径将把它们变成圆。

要使它们成为圆，您只需添加一个

边界半径

，比如说25到30px。我能够使它们成为圆，但我仍然在黑盒子内的对齐方面遇到问题。我在上面贴了一张问题的图片，希望你能帮忙？我建议在Chrome的开发者工具或其他工具集中检查这些元素。如果形状应该在顶部，则将其设置为

top:0

和

left:50%

。将其与我的.shape1示例进行比较（您出于某种原因更改了该示例）。我认为您在CSS定位方面遇到了问题。我建议你也读一下。我之所以改变你的例子，是因为圆圈完全消失了，我只剩下3个？好的，没关系。只要确保.shape1有

页边距顶部：-50px并且该形状应该看起来正确。
<body>
    <div class="wrapper">
        <div class="back">
            <div class="pad shape1" data-pad="1">
                <audio preload="auto" class="sound1">
                    <source src="sounds/mp3/sounds_01.mp3" type="audio/mpeg"/>
                    <source src="sounds/ogg/sounds_01.ogg" type="audio/ogg"/>
                </audio>
            </div>
            <div class="pad shape2" data-pad="2">
                <audio preload="auto" class="sound2">
                    <source src="sounds/mp3/sounds_02.mp3"  type="audio/mpeg"/>
                    <source src="sounds/ogg/sounds_02.ogg" type="audio/ogg"/>
                </audio>
            </div>
            <div class="pad shape3" data-pad="3">
                <audio preload="auto" class="sound3">
                    <source src="sounds/mp3/sounds_03.mp3" type="audio/mpeg"/>
                    <source src="sounds/ogg/sounds_03.ogg" type="audio/ogg"/>
                </audio>
            </div>
            <div class="pad shape4" data-pad="4">
                <audio preload="auto" class="sound4">
                    <source src="sounds/mp3/sounds_04.mp3" type="audio/mpeg"/>
                    <source src="sounds/ogg/sounds_04.ogg" type="audio/ogg"/>
                </audio>
            </div>
            <div class="break"></div>
        </div>

        <div class="level">
            <h2>Level: 1</h2>
        </div>
        <div class="score">
            <h2>Score: 0</h2>
        </div>

        <ul class="difficulty">

            <li>
                <input type="radio" class="difOpt" name="difficulty" value="2">Easy
            </li>
            <li>
                <input type="radio" class="difOpt" name="difficulty" value="1" checked>Normal
            </li>
            <li>
                <input type="radio" class="difOpt" name="difficulty" value="0.5">Hard
            </li>
            <li>
                <input type="radio" class="difOpt" name="difficulty" value="0.25">Insane
            </li>
        </ul>
        <div class="sButton">
            <button class="start">start</button>
        </div>
    </div>
</body>

.shape1 {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -50px;
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 50%;
}