Question

我试图把所有的盒子放在同一行，我做了但是有一个问题，
看看最后一个方框，它不在同一行。
可以通过在最后一节添加一个文本行来完成，但我只需要2行。

如何解决这个问题？

＆＃13;

body {
background: black;
}
.box-container {
  margin-top: 0px;
  text-align: center;
  background: white;
  white-space: nowrap;
}
.box {
  display: inline-block;
  background: green;
  width: 250px;
  height: 300px;
  margin: 35px;
  color: white;
  white-space: normal;
}
.fa.rounded.big {
    font-size: 3.5em;
}
.fa.rounded {
    border-radius: 100%;
    border: 1px solid white;
    height: 150px;
    line-height: 150px;
    width: 150px;
}
.box-container section .fa.rounded {
  margin-bottom: 30px;
}

＆＃13;

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body>
<div class="box-container">
<section class="box"><i class="fa rounded fa-clock-o fa-5x"></i><br><a>This page is created with HTML, CSS and jQuery and beacuse of that, it should be fast.</a></section>
<section class="box"><i class="fa rounded fa-heart-o fa-5x"></i><br><a>Beacuse of bootstrap, UIkit, Animate.css, WOW.js this page is even more awesome!</a></section>
<section class="box"><i class="fa rounded fa-code fa-5x"></i><br><a>There is only 41 lines of code but there will be more things soon!</a></section>
</div>
</body>

＆＃13;

有3个盒子，
确保你看到它们，看整页。

Answer 1

添加

vertical-align: top;

CSS属性到最后一个框。这应该解决它。

盒子不会显示内联

1 个答案: