时间戳

首页 > 解决方案 > css span 标签高度排序

html - css span 标签高度排序

问题描述

你好我想把这个跨度标签排成一行

但是具有内部文本的标签被排序，没有内部文本的标签

文本已排序

所以这些标签高度不正确

我想在一行中对这个跨度框（class==a）进行排序

解决办法是什么？

示例代码在底部

<html>
  <head>
  <title>a</title>
    <meta charset = "utf-8">
    <style>
    .a {
        width: 17%;
        height: 5%;
        display: inline-block;
    }
    </style>
  </head>
  <body>
      <span  class = "a"></span>
      <span  class = "a">2</span>
      <span  class = "a">2</span>
      <span  class = "a">2</span>
      <span  class = "a">2</span>
  </body>
</html>

标签： htmlcss

解决方案

1.) 如果您height使用百分比值定义，则父元素需要定义的高度。body下面我为（直接父级）和 ）html的父级定义了 100% 的高度body。如果这是在 a 内div，则div需要一个高度定义。

2.) 要通过它们的顶部边框对齐内联块，您可以使用vertical-align: top;（默认情况下是baseline否则）

html,
body {
  height: 100%;
  min-height: 600px;
}

.a {
  width: 17%;
  height: 5%;
  display: inline-block;
  border: 1px solid red;
  vertical-align: top;
}
<body>
  <span class="a"></span>
  <span class="a">2</span>
  <span class="a">2</span>
  <span class="a">2</span>
  <span class="a">2</span>
</body>

推荐阅读