对齐段落标记旁边的无序列表

时间:2012-12-03 13:36:19

标签: css html5 css3

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

胜利: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中有一种方法可以阻止

标记开始换行?

感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

display: inline应用于两者 ulli。请将此小提琴作为示例:http://jsfiddle.net/3nLG5/