列表流向一边

Question

如何让列表流向一边？

我看到的最好的例子是TruTower's VoIP Page。我正在尝试将我的网站从旧的html更新为新的css，但无法找到正确的代码。

首选OL风格（数字），但UL也可以。

Answer 1

您可能需要查看此jsfiddle以获取开始的示例。

http://jsfiddle.net/ashrobbins/SKzwU/

ul {
    list-style:none;
    margin:0;
    padding:0;
}
li {
    float:left;
}
li + li {
    border-left:1px solid #ccc;
}
a {
    display:block;
    padding:7px 10px;

    color:#222;
    background:#eee;
    text-decoration:none;
}
a:hover {
    color:#fff;
    background:#666;
}
a:active {
    color:#fff;
    background:#0090cf;
}

Answer 2

更新安德鲁的答案以确切满足您的需求：

截图：

HTML：

<ol>
    <li>
        <a href="#">Home</a>
    </li>
    <li>
        <a href="#">About</a>
    </li>
    <li>
        <a href="#">Contact</a>
    </li>
</ol>

CSS：

ol {
    margin:0;
    padding:0;
    position:absolute;
    right:0px;
    left:0px;
    background: #eee;
}
li {
    float:left;
    padding-left:5px;
    list-style-position: inside;
}
li + li {
    border-left:1px solid #ccc;
}
a {
    display:inline-block;
    padding:7px 10px;

    color:#222;
    background:#eee;
    text-decoration:none;
}

li:hover{
    color: #fff;
    background-color:#666;
}
a:hover {
    color:#fff;
    background:#666;
}
a:active {
    color:#fff;
    background:#0090cf;
}

FIDDLE