我正在编辑我想用于我的博客的 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>
最佳答案
由于您没有提供任何 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 本身的内容。
关于css - 如何使用 CSS 突出显示小部件标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26289568/