时间戳

首页 > 解决方案 > 如何将盒子放在其他盒子旁边

html - 如何将盒子放在其他盒子旁边

问题描述

我想将 2 个盒子放在 1 行，另外 2 个放在下一行，但我不知道该怎么做，
现在每行只显示 1 个盒子
，请问你们中的任何人都可以解决这个问题吗

body{
    background:#f4f4f4;
    color:#555;
    font-family:Bahnschrift SemiCondensed;
    font-size:16px;
    font-weight:normal;
    margin:0;
}

.container{
    width:80%;
    margin:auto;
    overflow:hidden;
}

#operator {
    padding:0;
    text-decoration:none;
}

.op-box {
    border-radius: 15px / 50px;
    background:#ccc;
    margin:12px; 
    position: relative;
    height:155px;
    width: 50%;
    border:green 1px solid ;
    display:inline-block;
}

.op-box a {
    color:#000;
    text-decoration:none;
    position: absolute;
    padding:70px 0px;
    text-align:center;
    width: 100%;
    height: 100%;
}
!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

<div class="container">
        <h4>list</h4>
            <ul id="operator">
                <li><div class="op-box"><a href="#">list1</a></div></li>
                <li><div class="op-box"><a href="#">list2</a></div></li>
                <li><div class="op-box"><a href="#">list3</a></div></li>
                <li><div class="op-box"><a href="#">list4</a></div></li>
            </ul>
        </div>

    <div style="margin-top:400px"></div>
</body>
</html>

我想将 2 个盒子放在 1 行，另外 2 个放在下一行，但我不知道该怎么做，
现在每行只显示 1 个盒子
，请问你们中的任何人都可以解决这个问题吗

标签： htmlcss

解决方案

您可以通过执行以下操作来实现它：

ul {
  display: grid;  
  grid-template-columns: repeat(2, 1fr);
}

推荐阅读