Div未对齐

Question

我有一排没有对齐的div。每个div都显示为内联块，但是有两行文本的div与行的其余部分不一致。

.stopHoriz {
  display: inline-block;
  border: 1px solid black;
  width: 75px;
  height: 75px;
  text-align: center;
  font-size: .8em;
}
.stopVertical {
  margin-bottom: 3px;
  border: 1px solid black;
  width: 75px;
  height: 75px;
  text-align: center;
  font-size: .8em;
}

<div style="padding-right: 30px; vertical-align:top">
  <div class="stopHoriz">Amusement</div>
  <div class="stopHoriz">State Park</div>
  <div class="stopHoriz">Zoo</div>
  <div class="stopHoriz">History</div>
  <div class="stopHoriz">Marine Encounters</div>
  <div class="stopHoriz">Onset</div>
  <div class="stopHoriz">Museum</div>
  <div class="stopHoriz">Beaches</div>
</div>

Answer 1

在vertical-align:top div中使用.stopHoriz来对齐它们。

jsFiddle

Answer 2

如果它对您有帮助，您可以尝试以下CSS类。

.stopHoriz
{
display: inline;
border: 1px solid #000;
font-size: .8em;
padding: 10px;
}

因此，它会根据需要占用空间，而不是固定宽度和高度。

Answer 3

将宽度设置为100px。它与您设置的宽度有关。 “海洋遭遇”这个词不符合您指定的宽度。除此之外，您还可以使用'vertical-align':top。有很多解决方案。这取决于你使用的是什么。