css span tag height sort-CodePudding

hello i want to this span tags sort in one line

but tag that has inner text is sort down, tag that has no inner

text is sort up

so these tags height is not correct

I want to sort this span box(class==a) in one line

what is the solution?

sample code is in bottom

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

CodePudding user response：

1.) If you define height with a percentage value, the parent element needs a defined height. Below I defined 100% height for body (the direct parent) and htmlthe parent of body). If this is inside a div, that div needs a height definition.

2.) To align inline-blocks by their top border, you can use vertical-align: top; (The default is baseline otherwise)

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>