我的页面上有几个未排序的列表。两个列表都使用 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 的破解修复，但我认为这与我无关，因为我在 Firefox 3 & 4 和 Google Chrome 中遇到了这个问题。
有谁知道如何让列表项元素符号(圆盘)出现在每个行元素的顶部？
最佳答案
看起来 vertical-align: text-top; 会做你想做的事 ( see spec )。我相信原因是您正在创建高内联 block ，这些内联 block 与盒子的顶部对齐，而盒子的顶部被高内联盒向上推，因此与顶部对齐并不能满足您的要求。但是，我相信使用 text-top 会将其与文本所在位置(和元素符号点)的顶部对齐。
http://jsfiddle.net/Yayuj/是一个可以做你想做的事情的 fiddle (我相信)并且主要有你的 CSS 中的这个更新部分:
#billing_form .discount .item
{
display: inline-block;
width: 190px;
vertical-align: text-top;
}
与您上面粘贴的内容的任何其他差异应该是表面上的。
关于html - ListItem 圆盘显示在垂直底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6735404/