Question

我不能仅仅在我的文本中创建我的背景..一直到屏幕结束为止。知道我做错了吗？

这是我的HTML：

<div class="textSlide">
     <span id="firstTitle">We help you find everyone you</span>
     <span id="secondTitle">need to get you started.</span>
     <span id="thirdTitle">Look Ouch is an online meeting point where all kinds</span>
     <span id="fourthTitle">of artists can unite to make ideas happen.</span>
</div>

这是我的CSS：

.textSlide span { z-index: 999; position: relative; margin-left: 10%; font-family: Montserrat; display: block; padding: 5px; }

.textSlide #firstTitle { margin-top: 120px; font-size: 34px; font-weight: bold; background-color: #7d37e6; color: #fff; }
.textSlide #secondTitle { font-size: 34px; font-weight: bold; margin-top: 5px; background-color: #7d37e6; color: #fff; }
.textSlide #thirdTitle { font-size: 18px; margin-top: 12px; background-color: #7933e1; color: #fff; }
.textSlide #fourthTitle { font-size: 18px; margin-top: 5px; background-color: #7933e1; color: #fff; }

FIDDLE

Answer 1

将display: block更改为display: inline-block;

http://jsfiddle.net/w456u/1/

Answer 2

.textSlide span { z-index: 999; position: relative; margin-left: 10%; font-family: Montserrat; display: inline-block; padding: 5px; }

.textSlide #firstTitle { margin-top: 120px; font-size: 34px; font-weight: bold; background-color: #7d37e6; color: #fff; }
.textSlide #secondTitle { font-size: 34px; font-weight: bold; margin-top: 5px; background-color: #7d37e6; color: #fff; }
.textSlide #thirdTitle { font-size: 18px; margin-top: 12px; background-color: #7933e1; color: #fff; }
.textSlide #fourthTitle { font-size: 18px; margin-top: 5px; background-color: #7933e1; color: #fff; }

跨度与背景仅在文本中

2 个答案: