html - 将无序列表与段落标记对齐

Question

我的网站上有一个部分，我希望它看起来像这样:

获胜:1 | 2 | 5 | 6

输:3 | 5 | 5

我这样设置标记:

<article class="result_day">
    <p class="win_lose_text">Date: 21/02/2012</p>
        <p class="win_lose_text">Wins: </p>
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        <p>lose: </p>
            <ul>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
</article>

我尝试将无序列表放入段落标记中，但他们后来研究无法做到这一点。这是我的容器 CSS:

.result_day
{
    background: rgba(70,70,70,0.3);
    box-shadow: 1px 1px 2px #333333;
    border-radius: 1px;
}

.result_day ul
{
    list-style-type: none;
}

.result_day li
{
    display: inline;
}

我的未排序列表总是换行，我希望能够将它与段落标记保持在同一行。有没有办法做到这一点？也许 CSS 中有一种方法可以阻止

标记开始新行？

感谢您的帮助。

Answer 1

将 display: inline 应用于 您的 ul 和 li。以这个 fiddle 为例:http://jsfiddle.net/3nLG5/ .