如何将顶部 3 行 3 个方块仅移至右侧？

问题描述 投票：0回答：1

这段代码有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);

}
html css
1个回答
0
投票

我想我明白了你的问题。以下是您应该使用的新代码以及建议。

  1. 将 li 替换为 div，将 ul 替换为 div，以便您的代码符合编程约定

  2. 在 .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;

}

这将解决您的问题。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.