样式跨度和 Jquery

Question

希望是一个简单的问题，让我度过了一段空白的时光。我正在尝试在我的 HTML（与 jquery 块相关联）中设置 Span 标记的样式。

我的 SHOW 跨度保留了我设置的背景，但没有保留宽度。而 HIDE 居中，并具有适当的宽度。不知道为什么。我错过了什么阻止第一个带有“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>

http://jsfiddle.net/f8xxk/

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

Answer 1

由于span 是一个内联元素（它们忽略宽度属性），您需要为该跨度设置一个浮动或将显示设置为inline-block，以便让该跨度具有width

.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}

Fiddle

Answer 2

你不能设置内联元素的宽度，将它的显示属性设置为阻塞是解决它的一种方法。

修改后的小提琴：http://jsfiddle.net/f8xxk/3/

span {
    display: block;
}