Question

我有一个内联块元素的伪网格显示在我的主页上，但是其中两个之间存在差距，我无法解释。没有元素，没有边缘，没有br，没有任何东西可以在这些元素之间找到，迫使它们分开。用于Chrome的检查工具只是突出显示当我进入间隙时背后的容器。我试图摆弄边缘，但我还没有设法得到左上角元素（新预订）与其下的一个（会员计划）很好地发挥作用。所有其他元素的边距很好地间隔，因为我希望它们是。

摆弄显示问题的代码：https://jsfiddle.net/8b779myb/

有什么建议吗？

＆＃13;

.home-container {
  margin-top: 120px;
  width: 800px;
}
.home-container a {
  display: inline-block;
  color: black;
  text-decoration: none;
  width: 350px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: solid 1px #25561B;
  background-color: #F9FBF9;
}
.home-container a h2 {
  text-align: center;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  margin: 10px;
}
.home-container #new-booking {
  height: 242px;
  float: left;
}
.home-container #new-booking #car-new-booking {
  display: block;
  width: 250px;
  margin: 10px auto 20px;
}
.home-container #next-booking {} .home-container #all-bookings {} .home-container #membership-plans {} .home-container #browse-bays {}

＆＃13;

<div class="home-container">
  <a id="new-booking" href="/new-booking">

    <img id="car-new-booking" src="{{ url_for('static', filename='images/car-new-booking.png') }}" alt="new-booking-image" />
    <h2>New Booking</h2>
  </a>
  <a id="next-booking">
    <h2>Next Booking:</h2> Time, Car, Bay
  </a>
  <a id="all-bookings" href="/my-bookings">
    <h2>View All Bookings</h2>
    <br />Bookings to Date: {{ user.num_bookings }}
  </a>
  <a id="membership-plans">
    <h2>Membership Plan:</h2> {{ user.plan }}
  </a>
  <a id="browse-bays" href="/list-bays">
    <h2>Browse Bays</h2>
    <br />Home Bay: {{ user.homebay }}
  </a>

</div>

＆＃13;

Answer 1

添加此内容;

.home-container #membership-plans {
    float:left;
}

它将使元素之间的空间与其余元素相同。它刚刚被你用过的另一个推到了左边。使用添加的代码，元素应该被保留，这就是为什么它修复了间距问题。

https://jsfiddle.net/8b779myb/

Answer 2

将vertical-align: top;添加到.home-container a

的CSS规则中

https://jsfiddle.net/80phu3js/

（否则内联块元素按其基线对齐，默认情况下是最低的文本行）

Answer 3

有两种方法可以做到这一点：

1）正如Johannes已经写的那样，.home-container a{vertical-align: top;}因为默认值是基线。

https://jsfiddle.net/8b779myb/1/

2）使用.home-container a{display: block; float: left;}代替display: inline-block。浮动块元素与顶部对齐。

https://jsfiddle.net/8b779myb/2/

对齐关闭：内联块元素之间没有任何内容的间隙

3 个答案: