html - 列表流向一边

Question

我怎样才能让一个列表流到一边？

我所见的最好的例子是在TruTower 的 VoIP Page上。我正在尝试将我的网站从旧 html 更新到新 css，但找不到正确的代码。

喜欢 OL 风格（数字），但 UL 也可以。

Answer 1

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

截屏：

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;
}

小提琴

Answer 2

您可能希望查看此 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;
}