样式Span和Jquery

希望这是一个简单的问题，让我的空白时刻结束。我试图在我的HTML中设置一个Span标记的样式（它与jquery块相关联）

我的显示范围保留我设置的背景，但不保留宽度。而隐藏将居中，并具有适当的宽度。不知道为什么。我错过了什么，阻止了第一次完全用“SHOW”来表达风格？在下面拉小提琴

.slider{
display:none;
}
.collapseSlider{
display:none;
}
.sliderExpanded .collapseSlider{
display:block;
width: 100%;
text-align: center;
}
.sliderExpanded .expandSlider{
  display:none;
}
.dark {background:#0082d1; text-align: center; width: 100%;}
.light {background:#003a6f; text-align: center; width: 100%;}  

<p class="toggler" id="toggler-slideOne">
<span class="expandSlider dark">SHOW</span><span class="collapseSlider dark">HIDE</span>
 </p>
  <div class="slider" id="slideOne">
 <p>Slide One lorem ipsum opsum...</p>
 <span class="closeSlider">Close</span>
 </div>

滑块{
显示：无；
}
.collapselider{
显示：无；
}
.滑块展开.折叠滑块{
显示：块；
宽度：100%；
文本对齐：居中；
}
.sliderExpanded.expandSlider{
显示：无；
}
.深色{背景：#0082d1；文本对齐：中心；宽度：100%；}
.light{背景：#003a6f；文本对齐：中心；宽度：100%；}

展示皮

幻灯片一lorem ipsum opsum

接近

---

一如既往地感谢您的时间和持续支持

由于

span

是一个内联元素（它们忽略了width属性），因此需要将浮点设置为该span或将显示设置为

inline block

，以使该span具有

宽度

.dark {background:#0082d1; text-align: center; width: 100%;}
span {display:inline-block  }
/*Any of this will make the span to have a block and don't ignore the width property*/
span {display:block}

---

不能在内联元素上设置宽度，将其显示属性设置为block将是解决该问题的一种方法

改良提琴：

---

像这样？当然！简单但容易被忽视。谢谢：）很好用。非常感谢。

span {
    display: block;
}