Отображение диска ListItem на вертикальном дне

У меня есть несколько неуказанных списков на моей странице. В обоих списках используется list-style: disc inside;. У каждого списка-элементов есть пара div внутри них. Проблема в том, что содержимое списка элементов занимает несколько строк, а диск отображается вертикально, в нижней части многострочного списка.

Вот снимок экрана, показывающий проблему, которую я испытываю. Обратите внимание, что я украл изображение из аналогичного вопроса, это не мой HTML или CSS.

Вот чересстрочная версия моего HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="billing_form">
<div id="purchase_items">
    <h2>Your purchase</h2>
    <h4>Items:</h4>
    <div class="items">
        <ul>
            <li>
                <div class="item">First Product - one year license</div>
                <div class="price">$99.00 USD</div>
            </li>
            <li>
                <div class="item">Second product & 3 year Product Plan</div>
                <div class="price">$125.00 USD</div>
            </li>
        </ul>
    </div>
    <div class="subtotal">SUBTOTAL: $224.00 USD</div>
    <h4>Discounts:</h4>
    <div class="discount">
        <ul>
            <li>
                <div class="item">A really long discount item name - with extra info on three lines!</div>
                <div class="price">- $20.00 USD</div>
            </li>
        </ul>
    </div>
    <div class="total">TOTAL: $204.00 USD</div>
</div>
</div>

</body>
</html>

И вот CSS, насколько я думал, имеет значение:

html
{
    font-family: sans-serif;
}

#billing_form
{
    width: 350px;
    margin: 0 auto;
    font-size: 14px;
    background-color: #EEEEEE;
}

#billing_form .items
{
    position:relative;
}

#billing_form .discount
{
    position:relative;
    color:#3665B0;
}

#billing_form ul
{
    margin: 0;
    padding: 0;
    list-style: disc inside;
}

#billing_form .items .item, 
#billing_form .discount .item
{
    display: inline-block;
    width: 190px;
}

#billing_form .price
{
    float: right;
    padding-left: 20px;
}

#billing_form .items,
#billing_form .discount,
#billing_form .subtotal,
#billing_form .total
{
    width: 100%;
}

#billing_form .subtotal,
#billing_form .total
{
    text-align: right;
    margin-top: 5px;
    border-top: 1px solid;
    font-weight: bold;
}

#billing_form  #purchase_items
{
    margin: 10px 10px 10px;
}

Я нашел аналогичный вопрос SO. К сожалению, принятый (и единственный) ответ на него указывает на попытку position: relative; и vertical-align: top;, но это не сработало для меня. Я пробовал его с помощью #billing_form ul и #billing_form ul li и не работал. Они также упоминают исправление взлома IE7, но я не думаю, что это имеет отношение ко мне, потому что я испытываю проблему в Firefox 3 и 4 и Google Chrome.

Кто-нибудь знает, как я могу сделать маркеры списка (диски) в верхней части каждой позиции?

Ответ 1