ListItem 圆盘显示在垂直底部
Posted
技术标签:
【中文标题】ListItem 圆盘显示在垂直底部【英文标题】：ListItem disc displaying at vertical bottom 【发布时间】：2011-10-07 19:16:08 【问题描述】：我的页面上有几个无序列表。两个列表都使用list-style: disc inside;。每个列表的列表项中都有一对div。问题是列表项的内容占据了多行，并且光盘垂直显示在多行列表项的底部。
这是一个screenshot 显示我遇到的问题。请注意，我从一个类似的问题中窃取了图像，它不是我的 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;
我找到了similar SO question。不幸的是，接受的（也是唯一的）答案声明尝试position: relative; 和vertical-align: top;，但它对我不起作用。我用#billing_form ul 和#billing_form ul li 都试过了，但都没有成功。他们还提到了 IE7 hack 修复，但我认为这与我无关，因为我在 Firefox 3 & 4 和 Google Chrome 中遇到了这个问题。
有谁知道如何让列表项项目符号（光盘）出现在每个行项目的顶部？
【问题讨论】：
【参考方案1】：看起来vertical-align: text-top; 会做你想做的事 (see spec)。我相信原因是您正在创建与盒子顶部对齐的高内联块，该盒子被高内联框向上推，因此与顶部对齐并不能满足您的要求。但是，我相信使用 text-top 会将其与文本所在的顶部（和项目符号点）对齐。
http://jsfiddle.net/Yayuj/ 是一个可以做你想做的事（我相信）的小提琴，并且主要从你的 CSS 中更新了这个部分：
#billing_form .discount .item
display: inline-block;
width: 190px;
vertical-align: text-top;
与您上面粘贴的任何其他差异都应该是装饰性的。
【讨论】：
我通过将@Chris css 块添加到您的示例中得到了相同的结果 这对我来说非常有效！我尝试了vertical-align: top;，但没有成功，但我什至不知道text-top 选项。另外，感谢 jsfiddle 链接，我不知道用于测试 html/css/js sn-ps 的非常有用的工具。
@gweebz：jsfiddle 是一个很好的工具来提出这些问题，因为你可以在上面设置你的问题，然后人们可以来玩它来尝试解决它等等。现在你知道了，我强烈建议为任何类似的 html/css/javascript 类型的问题设置一个小提琴。而且您永远不会知道，在设置它时，您实际上可能会自己找到解决方案。 :)
谢谢，虽然你把vertical-align: text-top放在所有东西上，但在我的测试中，你似乎只需要在<li>内的<div>（内联块）上使用它
@ClayLiu：实际上，如果您查看选择器，您会发现它正在选择 li 内的第一个 div。以上是关于ListItem 圆盘显示在垂直底部的主要内容，如果未能解决你的问题，请参考以下文章