css - 如何使用 CSS 突出显示小部件标题？

Question

我正在编辑我想用于我的博客的 Wordpress 主题。我想在这个页面中突出显示小部件的标题:http://nathanandaudrey.org/

例。 http://i.imgbox.com/dh0hApE4.jpg

我试过了

.widget-title { background: #e1e1e1;}

但这改变了整行的颜色，我只想突出显示文本。任何人都知道我是否以及如何使用 CSS 实现相同的效果？提前致谢。

示例 html；

<aside id="recent-posts-2" class="widget widget_recent_entries">
    <h3 class="widget-title">Recent Posts</h3>
    <ul>
        <li></li>
    </ul>
</aside>

Answer 1

由于您没有提供任何 html，所以您很难找到答案，所以这是一个猜测。在标题元素上使用display: inline-block；

.widget {
  width: 400px;
  height: 200px;
  background-color: #666;
}
.widget h3 {
  background-color: #e1e1e1;
  padding: 5px;
  margin-bottom: 5px;
  display: inline-block;
}

<aside id="recent-posts-2" class="widget widget_recent_entries">
	<h3 class="widget-title">Recent Posts</h3>
	<ul>
		<li>foo bar</li>
	</ul>
</aside>

默认情况下，div 元素是 block - 这意味着它们跨越容器的整个宽度，如果将其更改为 display: inline-block，这将更改以仅适合 div 本身的内容。