css - 带有背景图像的块元素中的 css 压缩文本

Question

我想让我的侧边栏 uls 中的 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: 对。然后你可以给它一些 padding-right 来调整侧边栏右边缘的文本对齐方式。