css span tag height sort

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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x