我想要的是绿色背景刚好在文本的后面,而不是100%的页面宽度。这是我当前的代码:
h1 { text-align:中心; 背景颜色:绿色; } <h1>埃里克·琼斯最后的遗嘱和遗嘱<h1>
我想要的是绿色背景刚好在文本的后面,而不是100%的页面宽度。这是我当前的代码:
h1 { text-align:中心; 背景颜色:绿色; } <h1>埃里克·琼斯最后的遗嘱和遗嘱<h1>
当前回答
很容易:
<p>lorem ibsum....</p>
样式:
p{
background-color: #eee;
display: inline;
}
背景设置为元素的整体大小; 从这里修改内联元素和块元素之间的区别
其他回答
编辑:下面的答案适用于大多数情况。然而OP后来提到,除了CSS文件,他们不能编辑任何东西。但我把这个留在这里,可能对其他人有用。
其他人忽略的主要考虑是OP声明他们不能修改HTML。
你可以在DOM中定位你需要的东西,然后用javascript动态地添加类。然后按你需要的样式。
在我做的一个例子中,我用jQuery瞄准所有<p>元素,并用一个带有“colored”类的div包装它
$( "p" ).wrap( "<div class='colored'></div>" );
然后在我的CSS中,我针对<p>,并给它背景色,并更改为display: inline
.colored p {
display: inline;
background: green;
}
通过将显示设置为内联,您将失去它通常会继承的一些样式。因此,请确保您的目标是最特定的元素,并设置容器的样式以适应您的其余设计。这只是一个工作的起点。小心使用。CodePen上的工作演示
尝试删除文本对齐中心,并将文本所在的<h1>或<div>居中。
h1 {
background-color:green;
margin: 0 auto;
width: 200px;
}
HTML
<h1 class="green-background"> Whatever text you want. </h1>
CSS
.green-background {
text-align: center;
padding: 5px; /*Optional (Padding is just for a better style.)*/
background-color: green;
}
将文本放入内联元素中,例如<span>。
<h1><span>The Last Will and Testament of Eric Jones</span></h1>
然后在内联元素上应用背景色。
h1 {
text-align: center;
}
h1 span {
background-color: green;
}
内联元素和它的内容一样大,所以这应该可以帮你。
很容易:
<p>lorem ibsum....</p>
样式:
p{
background-color: #eee;
display: inline;
}
背景设置为元素的整体大小; 从这里修改内联元素和块元素之间的区别