ListItem光盘显示在垂直底部

Question

ListItem光盘显示在垂直底部

Jes*_*ebb 14 html css vertical-alignment html-lists

我的页面上有几个未排序的列表.两个列表都使用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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

我发现了一个类似的问题.不幸的是,接受(并且唯一)的答案表明尝试position: relative;,vertical-align: top;但它对我不起作用.我既试了一下#billing_form ul,并#billing_form ul li和既不工作.他们还提到了一个IE7黑客修复程序,但我不认为这与我有关,因为我遇到了Firefox 3&4和谷歌浏览器中的问题.

有谁知道如何使列表项目项目符号(光盘)出现在每个行项目的顶部？

Answer 1

Chr*_*ris 26

它看起来vertical-align: text-top;会做你想要的(见规格).我相信原因是你正在创建一个高大的内嵌块,它与盒子的顶部对齐,被高大的内联盒向上推,因此与顶部对齐并不能达到你想要的效果.但是,我相信使用text-top会将其与文本所在的顶部(以及项目符号点)对齐.

http://jsfiddle.net/Yayuj/是一个小提琴,可以做你想要的(我相信),主要是你的CSS中更新的部分:

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

Run Code Online (Sandbox Code Playgroud)

与上面粘贴的任何其他差异都应该是装饰性的.

归档时间：	14 年，1 月前
查看次数：	9117 次
最近记录：	8 年，1 月前