跨度与边距和填充

Question

我需要将两个跨度放在一起，试图在图片中获得效果。

<li class="hello">
  <a href="#">
    <span>Hello</span> <span class="numbers">20</span>
   </a>
</li>

由于span不能有边距，宽度或填充我正在使用内联块：

li {
  height: 46px;
  text-align: center;
  float: left
}

li a {
  color: white;
  display: inline-block;
  font-size: 15px;
  line-height: 44px;
  padding: 0 24px;
}

.numbers {
  display: inline-block;
  margin-left: 6px;
  padding: 4px 6px 4px 6px;
  height: 18px;
  background:#A9A9A9
}

但这会将“Hello”和“20”文本向下推一点，灰色背景将被抛到顶部（如下所示）。

如何实现第一张图片中描述的效果？

编辑：我还为li和a以及Demo

添加了相关的CSS

Answer 1

此处的问题是您有line-height 44px的值。使用height上的numbers值，您可以获得短背景和偏移文本。您将需要再次为该跨度设置值等于其高度：

.numbers {
  display: inline-block;
  margin-left: 6px;
  height:18px;
  line-height:18px; /*ADD THIS*/
  padding: 4px 6px 4px 6px;
  background:#A9A9A9
}

li {
  height: 46px;
  text-align: center;
  float: left
}

li a {
  color: white;
  display: inline-block;
  font-size: 15px;
  line-height: 44px;
  padding: 0 24px;
  background:aqua;
  text-decoration:none;
}

.numbers {
  display: inline-block;
  margin-left: 6px;
  height:18px;
  line-height:18px;
  padding: 4px 6px 4px 6px;
  background:#A9A9A9
}

<li class="hello">
  <a href="#">
    <span>Hello</span> <span class="numbers">20</span>
   </a>
</li>

Answer 2

你在这里：）

＆＃13;

＆＃13;

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}
li {
  height: 46px;
  text-align: center;
  float: left;
  background: lightblue;
  margin-right: 10px;
}
li a {
  color: white;
  display: inline-block;
  font-size: 15px;
  line-height: 44px;
  padding: 0 24px;
  text-decoration: none;
}
.numbers {
  display: inline-block;
  margin-left: 6px;
  padding: 4px 6px 4px 6px;
  height: 18px;
  background: #A9A9A9;  
  line-height: 18px;
}

＆＃13;

<ul>
  <li class="hello">
    <a href="#">
      <span>Hello</span>  <span class="numbers">20</span>
    </a>
  </li>
  <li class="hello">
    <a href="#">
      <span>World</span>  <span class="numbers">55</span>
    </a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

.numbers {
  display: inline-block;
  margin-left: 6px;
  padding: 4px 6px 4px 6px;
  height: 18px;
  background: #A9A9A9
}
li {
  background-color: lightblue;;
  display: inline-block;
}
li a {
  padding: 10px;
  display: inline-block;
  color:white;
  text-decoration:none;
}

＆＃13;

<ul>
  <li class="hello">
    <a href="#">
      <span>Hello</span>  <span class="numbers">20</span>
    </a>

  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;