Make floating items remain the original position vertically-CodePudding

I have the following HTML

   ul {
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 12px;
      display: inline-block;
    }
    li {
      display: inline-block;
      padding: 0 5px;
    }
    
    .number {
      float:right;
    }
    .rec {
      float: left;
    }

 <div style="background-color: grey;">
  <span style="font-size:16px">Text</span>
  <ul>
    <li>10</li>
    <li>records</li>
  </ul>
</div>

<br>

<div style="background-color: grey;">
  <span style="font-size:16px">Text</span>
  <ul>
    <li class="number">10</li>
    <li class="rec">records</li>
  </ul>
</div>

When the list item floats, they move higher vertically, See this screenshot

Here is the jsfiddle link:

https://jsfiddle.net/mddc/d193a4v8/1/

How to make floating items remain the original position vertically?

CodePudding user response：

You can adjust the line-height and reduce it to line-height: 8px for the property ul and it should align it properly as follows:

ul {
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: 12px;
      display: inline-block;
      line-height: 8px;
    }
    li {
      display: inline-block;
      padding: 0 5px;
    }
    
    .number {
      float:right;
    }
    .rec {
      float: left;
    }

<div style="background-color: grey;">
  <span style="font-size:16px">Text</span>
  <ul>
    <li>10</li>
    <li>records</li>
  </ul>
</div>

<br>

<div style="background-color: grey;">
  <span style="font-size:16px">Text</span>
  <ul>
    <li class="number">10</li>
    <li class="rec">records</li>
  </ul>
</div>