html - 我如何水平对齐我的盒子？-6ren

html - 我如何水平对齐我的盒子？

转载作者：太空宇宙更新时间：2023-11-04 13:40:04

我创建了 3 个盒子。通过 UL/LI。但它本身似乎并没有水平排列。

我试过了，float:right; 和 display: inline-block; 都没有对齐。

Preview Image
这是我的代码

#box1 {
  height: 300px;
  width: 250px;
  background-color: grey;
  display: inline-block
}

#box2 {
  height: 300px;
  width: 250px;
  background-color: grey;
  display: inline-block
}

#box3 {
  height: 300px;
  width: 250px;
  background-color: grey;
  display: inline-block
}

.boxy {
  list-style: none;
  display: inline-block;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <meta charset="UTF-8">
  <title>Askar Photography</title>
</head>

<body>
  <header>
    <h1 class="logo"><img src="Assets/logo.png"></h1>
    <input type="checkbox" id="nav-toggle" class="nav-toggle">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
    <label for="nav-toggle" class="nav-toggle-label">
                  <span></span>
                </label>
  </header>

  <div class="content">
    <ul class="boxy">
      <li>
        <div id="box1"></div>
      </li>
      <li>
        <div id="box2"></div>
      </li>
      <li>
        <div id="box3"></div>
      </li>
    </ul>
  </div>



</body>



<!--<div id="box2"></div> -->


</html>

基本上，此框将填充内容，并且必须水平对齐，中间的间距相等。我尝试使用谷歌搜索并按照分步指南进行操作，但无济于事。

最佳答案

use below code: it will help u  


<style>
     #box1 {
        height: 300px;
        width: 250px;
        background-color: grey;
        display: inline-block;
         margin-right:10px;

    }

    #box2 {
        height: 300px;
        width: 250px;
        background-color: grey;
        display: inline-block;
        margin-right:10px;
    }

    #box3 {
        height: 300px;
        width: 250px;
        background-color: grey;
        display: inline-block
    }

    .boxy{
        list-style: none;
        display: flex;
        width:100%;
    }

     </style>