Диск ListItem отображается вертикально внизу

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

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

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






Your purchase

Items:

  • First Product - one year license
    $99.00 USD
  • Second product & 3 year Product Plan
    $125.00 USD
SUBTOTAL: $224.00 USD

Discounts:

  • A really long discount item name - with extra info on three lines!
    - $20.00 USD
TOTAL: $204.00 USD

А вот 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.

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

14
задан Community 23 May 2017 в 12:25
поделиться