为什么第一个内联块锚定在底部？

Question

我有两个并排的块：#abc 和 #buttons（后者包含内联图像）。

我不明白为什么文字“abcd”会漂浮在黄色的底部div。

问题：为什么默认情况下它不在 #wrapper 的左上角？

旁注：如何将此文本“abcd”设置在黄色的顶部（垂直）或中间（垂直）div？

* { margin: 0; padding: 0; }
#abc, #buttons { display: inline-block; }
#wrapper { background-color: yellow; }
ul li { display: inline; }

<div id="wrapper">
  <div id="abc">
  abcd
  </div>
  <div id="buttons">
    <ul>
      <li><a href="/1"><img src="https://via.placeholder.com/75x75"></a></li>
      <li><a href="/2"><img src="https://via.placeholder.com/75x75"></a></li>
      <li><a href="/3"><img src="https://via.placeholder.com/75x75"></a></li>
      <li><a href="/4"><img src="https://via.placeholder.com/75x75"></a></li>
    </ul>
  </div>
</div>

Answer 1

默认情况下，如果您将属性设置为内联，它将具有 vertical-align 属性作为 baseline 它的默认行为

但是如果你想让它居中对齐或者顶部对齐你可以把它改成middle

查看此代码

* { margin: 0; padding: 0; }
#abc, #buttons { display: inline-block; vertical-align: middle; }
#wrapper { background-color: yellow; }
ul li { display: inline; }

<div id="wrapper">
  <div id="abc">
  abcd
  </div>
  <div id="buttons">
    <ul>
      <li><a href="/1"><img src="https://via.placeholder.com/50x50"></a></li>
      <li><a href="/2"><img src="https://via.placeholder.com/50x50"></a></li>
      <li><a href="/3"><img src="https://via.placeholder.com/50x50"></a></li>
      <li><a href="/4"><img src="https://via.placeholder.com/50x50"></a></li>
    </ul>
  </div>
</div>

您可以查看css trick了解更多详情

Answer 2

它一定与 display: inline 和 display: inline-block 使元素的行为方式有关。我尽量避免 display: inline （这是所有元素的默认行为，不需要指定）。同时，我猜 display: inline-block 将元素缩小到尽可能小并将其向下推？我没有技术答案，但我有 a solution on codepen.

此解决方案使用 flexbox，css 内的天赐之物。

为什么第一个内联块锚定在底部？

Why is this first in-line block anchored at the bottom?

html

css

inline-styles

display