Question

I have a section on my website that i want to look like this:

Wins: 1 | 2 | 5 | 6

Lose: 3 | 5 | 5

I set my mark-up like so:

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

I tried putting the unordered list into the paragraph tag but they later researched that this can’t be done. this is my css for the container:

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

My unodered list is always on a new line, i want to be able to keep it on the same line as the paragraph tag. Is there a way of doing this? Maybe there is a way in CSS to stop the

tag from starting a new line?

thanks for the help.

Answer 1

Apply display: inline to both your ul and your li. See this fiddle as an example: http://jsfiddle.net/3nLG5/.