时间戳

首页 > 解决方案 > 添加内容时内联元素不对齐

html - 添加内容时内联元素不对齐

问题描述

令我惊讶的是，即使它们在数学上具有相同的高度，内联元素也不会对齐。

一个元素的高度为 50 像素，其他元素的高度为 44 像素 + 3 像素内边距（= 50 像素高度）。

我发现一些帖子说要使用垂直对齐：顶部；。但我不清楚为什么这与内容有关。

没有内容，它们显示在一行中，但是一旦我添加内容（文本），高度为 50px 的元素就会被向下推。

这是什么原因，我该如何改变它？

HTML代码

<div>
  <span class="x">x</span>
  <span class="y">x</span>
  <span class="x">x</span>
<div>

CSS

div {
  height: 50px;
}

span {
  display: inline-block;
  border: 1px solid black;
}

.x {
  height: 50px;
}

.y {
  height: 44px;
  padding: 3px 0;
}

非常感谢

标签： htmlcss

解决方案

在您的 CSS 代码中，添加vertical-align:top如下span内容：

span {
  display: inline-block;
  border: 1px solid black;
  vertical-align: top;
}

这是片段：

div {
  height: 50px;
}

span {
  display: inline-block;
  border: 1px solid black;
  vertical-align: top;
}

.x {
  height: 50px;
}

.y {
  height: 44px;
  padding: 3px 0;
}
<div>
  <span class="x">x</span>
  <span class="y">x</span>
  <span class="x">x</span>
  <div>

推荐阅读