css用/ background图像挤压块元素中的文本

Question

我希望我的侧边栏中的h2文本正确对齐并从左侧“挤压”，以便文本显示在单独的线条上，并且整齐地放在背景图像的右侧较胖的部分中。我非常感谢你的帮助...

#l_sidebar ul h2,
#r_sidebar ul h2 {
 background: transparent url("images/tag_green01.png") top left no-repeat;
 text-align: right;
 width: 180px;
 height: 50px;
 padding-top: 50px;
}

网站：http://www.wespeakfashion.com/

Answer 1

width: 180px;

这是H2的宽度，因此任何可以放入该空间而不必包裹的文本都不会。如果你想强制包装你必须a）缩小H2的宽度直到它包裹或b）在文本中的每个单词之间添加
标签。

更新：

您的HTML存在一些问题。这是无效的：

<div id="l_sidebar">
    <ul class="l_sidebarwidgeted">
        <h2>Recently Written</h2>
        <ul>

唯一允许UL的直接子女是LI。

尝试这样的事情：

 <div id="l_sidebar">
    <h2>My<br>Title<br>Here</h2>
    <ul>
        <li>etc...

其中h2是text-align：right。然后你可以给它一些填充权限来调整侧边栏右边缘的文本对齐方式。