css - 将文字直接放在<li> </li>的左侧 - Thinbug

将文字直接放在<li> </li>的左侧

时间：2010-04-23 05:02:09

标签： css layout css-float

我有一个歌曲列表，我想说“新！”在这样的新歌的左边：

alt text http://dl.dropbox.com/u/2792776/screenshots/2010-04-23_0051.png

我该怎么做才能让所有的歌曲排成一列？即，我希望不是新歌的名字与新歌曲的名称对齐，而不是“新”这个词的开头

请注意，如果“新！”这是微不足道的。是图片。即，我将图像设置为<li>的背景图像，并给它一些padding-left

2 个答案:

答案 0 :(得分：2)

HTML

<li>My song <span class="new">New!</span></li>

CSS

li {
 position: relative;
}

li .new {
    display: block;
    width: 30px;
    height: 10px; 
    position: absolute;
    top: 0;
    left: -40px;
    background: url(../images/new.png) no-repeat; /* if you wanted to use an image */
    text-indent: -9999px; /* as above */
}

这将具有额外的优势，即无样式的页面将在新曲目旁边显示一个小的新。

答案 1 :(得分：2)

这是一种使用直文进行操作的方法。你必须使用边距才能使它排成一行，它会随着每种字体而改变，但你可以得到主要的想法。

<html>
<head>
<style>
li.new:before {
    content: "New! ";
}

li {
    list-style: none;
}

li.new {
    margin-left: -29pt;
}
</style></head>
<body>
<ul class="newlist">
<li>Bob Marley</li>
<li class="new">Ziggy Marley</li>
<li>Bob Dylan</li>
<li class="new">Jacob Dylan</li>
</ul></body>
</html>