0

我有一排未对齐的 div。每个 div 都显示为 inline-block，但有 2 行文本的那个与该行的其余部分不一致。

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

4

3 回答 3

1

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

jsFiddle

于 2013-07-28T14:59:56.403 回答
1

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

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

这样它将根据需要占用空间，而不是固定宽度和高度。

于 2013-07-28T15:08:01.797 回答
0

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

于 2013-07-28T15:01:13.723 回答