ListItem disc displaying at vertical bottom

I have a couple un-ordered lists on my page. Both lists use list-style: disc inside;. Each list's list-items have a couple div's inside them. The problem is that the list-item's content takes up multiple lines and the disc is appearing vertically, at the bottom of the multi-line list-item.

Here is a screenshot kind of showing the problem I am experiencing. Note that I stole the image from a similar question, it is not my HTML or CSS.

Here is a striped down version of my 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>

And here is the CSS, as small as I thought was relevant:

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

I found a similar SO question. Unfortunately, the accepted (and only) answer to it states to try position: relative; and vertical-align: top; but it didn't work for me. I tried it with both #billing_form ul and #billing_form ul li and neither worked. They also mention a IE7 hack fix, but I don't think that is relevant to me because I am experiencing the problem in Firefox 3 & 4 and Google Chrome.

Does anyone know how I can make the list-item bullets (discs) appear at the top of each line item?

Chris

It looks like vertical-align: text-top; will do what you want (see spec). I believe the reason is that you are creating tall inline blocks that are aligning to the top of the box which is being pushed up by the tall inline box so aligning to top doesn't do what you want. However, I believe that using text-top will align it with the top of where the text is (and the bullet point).

http://jsfiddle.net/Yayuj/ is a fiddle that does what you want (I believe) and has primarily this updated section from your CSS:

#billing_form .discount .item
{
    display: inline-block;
    width: 190px;
    vertical-align: text-top;
}

Any other differences to what you have pasted above should be cosmetic.

来源：https://stackoverflow.com/questions/6735404/listitem-disc-displaying-at-vertical-bottom

标签

html

css

html-lists

vertical-alignment