Question

我想制作一个程式化的无序列表，如下所示，但我不希望它完全是div，我想使用<li>＆amp; <ul>标签，如果有必要，可能是div。

alt text

要制作这样的示例代码吗？

由于

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

Ben的列表标记看起来与我将放在一起的内容类似。我已经使用了他的标记并提供了一些CSS文件来获得与屏幕截图类似的内容：

标记：

<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跨度背景图像以简化。您显然只是在生产中引用本地网站文件。

希望它可以帮助一些人。： - ）

如何使用<li>和CSS？</li>来做这个列表

2 个答案: