我正在制作一个网站，其中三个<li>都向左浮动，它们每个都有特定图像的背景。我在每个文本中都有文本，<li>我想移动该文本，使其显示在背景下而不是背景上。这种布局的css是什么？
下面我有一个我希望布局的示例。谢谢您的帮助。
====== ====== ======
| | | | | |
| | | | | |
====== ====== ======
文字文字文字
我没有 ASCII 艺术技能，但希望你能明白。
问问题
7562 次
5 回答
4
将文本设置在一个margin-top等于背景图像高度的范围内。跨度需要display: block为此工作。或者，更好的是，只需设置padding-top等于背景图像的高度，使用background-image-repeat: no-repeat.
有关工作示例，请参阅http://jsfiddle.net/77NdE/ 。
于 2012-05-23T16:36:55.647 回答
2
我假设您将高度设置为固定大小。如果是这种情况，您可以将 设置padding-top为与图像的高度相同，只要background-repeat是no-repeat，您应该在下面看到您的评论。
示例：http: //jsfiddle.net/qTB8E/
于 2012-05-23T16:41:43.600 回答
1
你可以为你的 li 元素指定一个固定的高度。高度将是“正在使用的背景图像的高度”+“在它下面的文本所需的高度”。然后在 li 元素的顶部应用填充，该填充等于背景图像的高度。
假设背景图像的高度是 14px，假设它下面的文本是 12px。然后，
li
{
height: 26px; /* 14 + 12 */
background-image: url(path/to/image);
background-position: top;
background-repeat: no-repeat; /* you can even repeat x if required */
padding-top: 14px;
}
于 2012-05-23T16:40:27.610 回答
1
增加 div 的高度以适应文本和背景。将背景设置为不重复并为文本提供填充顶部。
于 2012-05-23T16:38:22.353 回答
0
用伪类试试
<ul>
<li id="background"></li>
<li>Text</li>
<li id="background"></li>
<li>Text</li>
<li id="background"></li>
<li>Text</li>
</ul>
CSS
ul {}
ul li:nth-child(even) {padding-top:20px}
所以每一秒（每个偶数）li 元素都会从顶部有一个 20px 的填充（将其更改为您的 li 背景高度或更高）将“偶数”更改为“奇数”以使每个奇数对齐。希望你能明白我的意思:)
于 2012-05-23T16:47:13.917 回答