Question

我创建了3个盒子。通过UL / LI。但这似乎并没有使其水平对齐。

我尝试过float:right;和display: inline-block;，两者都无法对齐。

#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>

基本上，此框将充满内容，并且必须在水平方向上对齐，并且它们之间应有相等的间距。我尝试了谷歌搜索，并按照分步指南进行操作，但无济于事。

Answer 1

您需要执行以下操作：

.boxy {
  display: flex;
  justify-content: space-between;
}

#box1, #box2, #box3 {
  display: inline-block;
}

查看https://css-tricks.com/snippets/css/a-guide-to-flexbox/，了解有关flex及其用途的更多详细信息。当您需要在页面上放置响应快速，间距均匀的项目时，它是一个非常简洁的小工具。

Answer 2

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>

Answer 3

问题是您没有更改这些<li>标签的显示类型。需要将它们设置为display: inline-block;。

因此，基本上，您可以从#box1，#box2和#box3中取消display属性。而是添加以下内容：

.boxy > li { display: inline-block; }

Answer 4

您需要做的就是将以下内容添加到.boxy：

text-align:center;

并将display:inline-block中的属性display:block更改为.boxy

亲眼看到，我已经在您的代码中对以上内容进行了编辑，并且效果很好。

#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: block;
  text-align:center;
}

<!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>

Answer 5

您需要将li标记显示为行内块，这是因为浏览器默认所有li均为块类型元素。

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

我如何水平对齐盒子？

5 个答案: