这段代码有38个方格。我正在尝试将顶部的 3 行移动到右侧的 3 个方块。
我尝试了各种方法,但没有效果。如何将顶部的这 3 行移动到右侧 3 个方块,使其居中对齐?
如果查看输出,就会发现前 3 行(8 X 3 = 24 个方格)位于左侧。我正在尝试将其对齐到中间。最下面一行,即第 4 行,总共包含 14 个方格。我正在尝试将第 4 行(底部的行)的第 4 格和第 11 格之间的前 3 行对齐。
<body>
<div class="container">
<ul>
<div class="div" id="row1">
<li class="square" id="D14"></li>
<li class="square" id="E14"></li>
<li class="square" id="F14"></li>
<li class="square" id="G14"></li>
<li class="square" id="H14"></li>
<li class="square" id="I14"></li>
<li class="square" id="J14"></li>
<li class="square" id="K14"></li>
</div>
<div class="div" id="row2">
<li class="square" id="D13"></li>
<li class="square" id="E13"></li>
<li class="square" id="F13"></li>
<li class="square" id="G13"></li>
<li class="square" id="H13"></li>
<li class="square" id="I13"></li>
<li class="square" id="J13"></li>
<li class="square" id="K13"></li>
</div>
<div class="div" id="row3">
<li class="square" id="D12"></li>
<li class="square" id="E12"></li>
<li class="square" id="F12"></li>
<li class="square" id="G12"></li>
<li class="square" id="H12"></li>
<li class="square" id="I12"></li>
<li class="square" id="J12"></li>
<li class="square" id="K12"></li>
</div>
<div class="div" id="row4">
<li class="square" id="A11"></li>
<li class="square" id="B11"></li>
<li class="square" id="C11"></li>
<li class="square" id="D11"></li>
<li class="square" id="E11"></li>
<li class="square" id="F11"></li>
<li class="square" id="G11"></li>
<li class="square" id="H11"></li>
<li class="square" id="I11"></li>
<li class="square" id="J11"></li>
<li class="square" id="K11"></li>
<li class="square" id="L11"></li>
<li class="square" id="M11"></li>
<li class="square" id="N11"></li>
</div>
</ul>
</div>
</body>
*{
margin: 0;
padding: 0;
}
body {
display: flex;
place-items: center;
justify-content: center;
overflow-x: hidden;
height: 100vh;
background-color: #c0c0c0;
}
.container{
display: grid;
place-items: center;
justify-content: center;
}
.div{
display: flex;
}
ul{
display: grid;
grid-template-columns: 1fr;
}
li{
list-style: none;
display:grid;
place-items: center;
font-size: 0;
}
.square{
margin:.5px;
width: 60px;
height: 60px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
}
我想我明白了你的问题。以下是您应该使用的新代码以及建议。
将 li 替换为 div,将 ul 替换为 div,以便您的代码符合编程约定
在 .div 类中添加 justify-content:center 。
这是代码:
<body>
<div class="container">
<div id="cont">
<div class="div" id="row1">
<div class="square" id="D14"></div>
<div class="square" id="E14"></div>
<div class="square" id="F14"></div>
<div class="square" id="G14"></div>
<div class="square" id="H14"></div>
<div class="square" id="I14"></div>
<div class="square" id="J14"></div>
<div class="square" id="K14"></div>
</div>
<div class="div" id="row2">
<div class="square" id="D13"></div>
<div class="square" id="E13"></div>
<div class="square" id="F13"></div>
<div class="square" id="G13"></div>
<div class="square" id="H13"></div>
<div class="square" id="I13"></div>
<div class="square" id="J13"></div>
<div class="square" id="K13"></div>
</div>
<div class="div" id="row3">
<div class="square" id="D12"></div>
<div class="square" id="E12"></div>
<div class="square" id="F12"></div>
<div class="square" id="G12"></div>
<div class="square" id="H12"></div>
<div class="square" id="I12"></div>
<div class="square" id="J12"></div>
<div class="square" id="K12"></div>
</div>
<div class="div" id="row4">
<div class="square" id="A11"></div>
<div class="square" id="B11"></div>
<div class="square" id="C11"></div>
<div class="square" id="D11"></div>
<div class="square" id="E11"></div>
<div class="square" id="F11"></div>
<div class="square" id="G11"></div>
<div class="square" id="H11"></div>
<div class="square" id="I11"></div>
<div class="square" id="J11"></div>
<div class="square" id="K11"></div>
<div class="square" id="L11"></div>
<div class="square" id="M11"></div>
<div class="square" id="N11"></div>
</div>
</div>
</div>
</body>
CSS:
*{
margin: 0;
padding: 0;
}
body {
display: flex;
place-items: center;
justify-content: center;
overflow-x: hidden;
height: 100vh;
background-color: #c0c0c0;
}
.container{
display: grid;
place-items: center;
justify-content: center;
}
.div{
display: flex;
justify-content: center; /*Add this line*/
}
#cont{
display: grid;
grid-template-columns: 1fr;
}
.square{
margin:.5px;
width: 60px;
height: 60px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
list-style: none;
display:grid;
place-items: center;
font-size: 0;
}
这将解决您的问题。