我需要使用CSS堆叠两个文本

Question

我需要使用CSS将两个文本堆叠起来：

我试过这段代码：

.sp-order {
  position: absolute;
  text-align: center;
  bottom: 25px;
  z-index: 999;
  left: 25px;
  text-transform: uppercase;
}
.special-order>span {
  display: inline-block; 
  letter-spacing: 1px;
  font-weight: 700;
  padding: 0 2px;
  background: #f58220;
  color: #FFFFFF;
  line-height: 1.2;
}
.special-order>span {
  background: #000000;
  color: #f58220;
  display: block;
}

<div class="sp-order">
  <span>Special </span>
  <span>Orders</span>
</div>

我在两个文本之间得到了一些空间。帮助我。

Answer 1

你可以试试这个：

.sp-order {
  position: absolute;
  text-align: center;
  bottom: 25px;
  z-index: 999;
  left: 25px;
  text-transform: uppercase;
}
.sp-order>span:first-child {
  display:block;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 0 2px;
  background: #f58220;
  color: #FFFFFF;
  line-height: 1.2;
}
.sp-order>span:last-child {
  background: #000000;
  color: #f58220;
  padding: 0 2px;
}

<div class="sp-order">
  <span>Special </span>
  <span>Orders</span>
</div>

Answer 2

.sp-order {
  position: absolute;
  text-align: center;
  bottom: 25px;
  z-index: 999;
  left: 25px;
  text-transform: uppercase;
}

span.special {
  background: #000000;
    color: #f58220;
    display: block;
    font-weight: 700;
    line-height: 1.3;
    padding: 0 4px;
    border: 1px solid white;
    border-radius: 2px;
}

.order {
   display: inline-block; 
  font-weight: 600;
  padding: 0 2px;
  background: #f58220;
  color: #FFFFFF;
  line-height: 1;
  border-radius: 1px;
}

<div class="sp-order">
  <span class="special">Special </span>
  <span class="order">Order</span>
</div>

Answer 3

只需将第二个CSS选择器更改为.sp-order>span即可

.sp-order {
  position: absolute;
  text-align: center;
  bottom: 25px;
  z-index: 999;
  left: 25px;
  text-transform: uppercase;
}

.sp-order>span {
  background: #000000;
  color: #f58220;
  display: block;
  padding: 2px 12px;
}
.sp-order>span:nth-child(2) {
  background: #ddd;
  color: #fa0;
}

<div class="sp-order">
  <span>Special </span>
  <span>Orders</span>
</div>