为什么内联块元素中的文本强制兄弟内联块元素中的文本对齐？

Question

我有这个奇怪的situation，其中文字VanillaJs Cookbook强制Booking Calendar文字与文字cookbook水平对齐。有没有什么办法解决这一问题？您可以看到预订日历上方存在的黑色差距。

Answer 1

<nav>的子元素似乎定位为“内嵌”（可以通过display: inline，display: inline-block等css属性进行定位，也可以float: left，{{1 （以稍微不同的方式）。

但是屏幕截图显示的结果可能还有更多原因。我非常确定带有预订日历的float: right与烹饪书的<a>没有直接对齐！在里面。它只是意外地看起来好像是。

对于第一张照片，您可以尝试在<span> - 元素和/或<nav>及其子<ul>及其子<li>上应用以下规则，试着看看元素对齐方式如何变化：

<a>

同时检查nav { vertical-align: top; } ul, ul li, ul li a { vertical-align-top: } 及其内部<li>的填充，方法是给它指定一个padding-top，例如<a>

请提供有关适用于元素的CSS的更多信息以获得进一步的帮助。

Answer 2

这种情况正在发生，因为这些元素会自动对齐父母的底部。

如果你不想要这种行为，我推荐的是将文章和＃34;和＆＃34; ul＆＃34;元件。

这将允许您更自由地移动这些元素。

但是，您需要指定整个导航的宽度和高度。

以下是一个例子： https://jsfiddle.net/sL1w49h1/

风格：

nav {
  width: 100%;
  height: 150px;
}

article,
ul {
  float: left;
}

ul li {
  list-style-type: none;
}

.calendar {
  margin-top: 24px;
}