Как сделать как этот список, используя <li>и CSS?

Question

Я хочу создать стилизованный неупорядоченный список, как показано ниже, но я не хочу, чтобы он был полностью div, я хочу использовать теги <li> & <ul> и, возможно, div, если необходимо. *

Какой-нибудь пример кода, чтобы сделать так?

Спасибо

Answer 1

Для меня это выглядит так:

<ul class="rated-list">
    <li>
        <span class="rating">1086</span>
        <a href="/foo.html">Why Don't …</a>
    </li>
</ul>

Затем вы можете использовать CSS, чтобы задать фиксированную ширину span и a и плавать их влево.

В качестве альтернативы, вы можете сделать только span фиксированным и плавающим и дать ссылку margin-left, равную ширине span, плюс любой требуемый отступ. Если подумать, это, вероятно, лучшее решение! : -)

Answer 2

Наценка Бена на список похожа на то, что я бы собрал. Я использовал его разметку и предоставил некоторый CSS-файл, чтобы получить что-то похожее на ваш скриншот:

Markup:

<ul class="rated-list">
        <li>
            <span class="rating">1086</span>
            <a href="/foo.html">Why Don't…</a>
        </li>
        <li>
            <span class="rating">1087</span>
            <a href="/foo.html">We try...</a>
        </li>
        <li>
            <span class="rating">1088</span>
            <a href="/foo.html">A little...</a>
        </li>
        <li>
            <span class="rating">1089</span>
            <a href="/foo.html">CSS?</a>
        </li>
    </ul>

CSS:

body
{
    color:#958C51;
    font-family:arial,helvetica,sans-serif;
    font-size:83%;
    font-size-adjust:none;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
}
ul.rated-list
{
    list-style:none;
    width:300px;
    border-top:solid 1px #DDD;
    margin:0;
    padding:0;
}
ul.rated-list li 
{
    list-style:none;
    padding:5px 0px;
    border-bottom:solid 1px #DDD;
    vertical-align:top;
}
span.rating
{
    background:Transparent url('http://cotnet.diggstatic.com/img/shade-news.gif') no-repeat top left;
    display:inline-block;
    padding:15px 10px;
    width:32px;
    height:22px;
    font-weight:bold;
}
ul.rated-list li a
{
    width:240px;
    text-decoration:none;
    display:inline-block;
    color:#517197;
}

Я также установил небольшой начальный стиль тела и решил нарисовать фоновое изображение DIGG span для простоты. Очевидно, вы бы просто ссылались на файл локального веб-сайта в процессе производства.

Надеюсь, это поможет некоторым людям. : -)