0

如果我在文本元素上放置背景颜色，它会自动拉伸到 100%。

通常我会用max-width它来剪辑它，偶尔margin，但必须有更好的方法（或者应该是，imo）。

这是一个 jsfiddle来演示我的意思。是否有另一种更容易/更有效地使背景接近文本的方法？

4

5 回答 5

2

您可以添加到您的 H3 display : inline-block，它不会将其宽度拉伸到整个屏幕。并根据需要添加填充

于 2013-08-05T13:52:15.303 回答
1

添加一个内联子元素并将背景颜色添加到此...

因此，您的 HTML 将从

<h3 class="red">some text</h3>
<h3 class="red max">some text</h3>
<h3 class="red margin">some text</h3>
<h3 class="red custom">some text</h3>

至

<h3 class=""><span class="red">some text</span></h3>
<h3 class="max"><span class="red">some text</span></h3>
<h3 class="margin"><span class="red">some text</span></h3>
<h3 class="custom"><span class="red">some text</span></h3>
于 2013-08-05T13:51:37.347 回答
0

H3 是一个块元素，这意味着除非您指定特定的宽度和高度，否则它不会只绕过其内容。如果您希望它这样做，最简单的解决方案是将 H3 更改为内联的东西（即：SPAN）或将其包装到嵌套元素中。

<span class="red">some text</span>

或者

<h3><span class="red">some</span></h3>
于 2013-08-05T13:58:25.123 回答
0

这是因为 H3 是一个块元素。如果您不使用块元素（例如 SPAN），则背景颜色不会像您看到的那样被拉伸。

于 2013-08-05T13:52:13.137 回答
0

这有点像黑客：http: //jsfiddle.net/zuX3H/4/

h3 { color:white; margin:.2em auto; }
.red { background:red; display:inline; }
.red:after { content:"\A"; white-space:pre; }
* { text-align:center; }
于 2013-08-05T13:55:24.373 回答