Question

这可能是一个简单的问题。我有标题文本，有背景颜色。文本停止时背景颜色停止。我希望背景能够填满容器的整个长度。

<body>

 <div class="container">
   <p><span style="color:#ffffff; font-size:30px; background-color:#e12025;">I want the background-   color stretched across the container</span>
 </div>

</body>

的CSS：

body {
background-color:#e12025;
align:center;
font-family:sans-serif;
color:#000000;
font-size:28px;
}

.container {
background-color:#ffffff;
position:relative;
margin-left:auto;
margin-right:auto;
height:1785px;
width:900px;
border-style:none;
padding:10px;
}

以下是一个示例：http://mm2.co/background-color

Answer 1

如果您希望容器中的所有内容都在容器中“拉伸”，请移除容器中的填充：

.container {
    padding:10px; /* remove this */
}

如果您仍想在容器中保留顶部/底部填充，请执行以下操作：

   .container {
        padding:10px 0px; /* add the 0px */
   }

此外，您还希望显示范围段落 - 阻止。

添加/更改为：

<span style="display:block;">text here..</span>

Answer 2

嗯...

.container {
    display: block;
}

横跨容器延伸的文本背景

2 个答案: