Question

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

我试过

.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

请使用以下代码。

 .widget-title {
    font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    color: #FFF;
    font-weight: bold;
    text-shadow: 1px 1px 5px #000;
}

Answer 2

看到你没有提供任何HTML，你会让答案变得更难，所以这是一个猜测。在title元素上使用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元素是块 - 意味着它们跨越容器的整个宽度，如果将其更改为display: inline-block，则此更改仅适合div本身内的内容。

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

2 个答案: