Поместите текст прямо слева от <LI> - PullRequest
Новая
       14

Поместите текст прямо слева от <LI>

1 голос
/ 23 апреля 2010

У меня есть список песен, и я хочу поставить слово «Новый!»слева от новых песен вот так:

альтернативный текст http://dl.dropbox.com/u/2792776/screenshots/2010-04-23_0051.png

Как я могу сделать так, чтобы все песни выстроились в линию?То есть, я хочу, чтобы названия песен, которые не являются новыми, совпадали с названиями песен, которые являются новыми, а не с началом слова «Новый»

Обратите внимание, что этотривиально, если "Новый!"это изображение .Т.е. я установил изображение как фоновое изображение <li> и присвоил ему padding-left

Ответы [ 2 ]

2 голосов
/ 23 апреля 2010

Вот способ сделать это с простым текстом. Вы должны поиграть с полем, чтобы он выстроился в линию, и он будет меняться с каждым шрифтом, но вы можете понять основную идею. 

<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>
2 голосов
/ 23 апреля 2010

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 */
}

Это будет иметь дополнительное преимущество, заключающееся в том, что на странице без стиля рядом с новыми треками будет отображаться небольшой значок New.

...