在垂直底部显示ListItem光盘 [英] ListItem disc displaying at vertical bottom
问题描述
我的网页上有几个未排序的清单。这两个列表都使用 list-style：disc inside; 。每个列表的列表项目中都有一对夫妇 div 。问题是列表项目的内容占用多行，并且光盘垂直显示在多行列表项目的底部。
这里是一个屏幕截图显示我遇到的问题。注意，我从一个类似的问题偷了图片，它不是我的HTML或CSS。
这是一个条纹的HTML版本：
< html>
< head>
< link rel =stylesheettype =text / csshref =style.css>
< / head>
< body>
< div id =billing_form>
< div id =purchase_items>
< h2>您的购买< / h2>
< h4>项目：< / h4>
< div class =items>
< ul>
< li>
< div class =item>第一个产品 - 一年许可< / div>
< div class =price> $ 99.00 USD< / div>
< / li>
< li>
< div class =item>第二个产品& 3年产品计划< / div>
< div class =price> $ 125.00 USD< / div>
< / li>
< / ul>
< / div>
< div class =subtotal> SUBTOTAL：$ 224.00 USD< / div>
< h4>折扣：< / h4>
< div class =discount>
< ul>
< li>
< div class =item>一个非常长的折扣项目名称 - 三行有额外的信息！< / 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;
}
我发现了一个类似的SO问题。不幸的是，它接受的（只有）答案说明尝试 position：relative; 和 vertical-align：top; 但它没有为我工作。我尝试过 #billing_form ul 和 #billing_form ul li 并没有工作。他们还提到IE7修复，但我不认为这是与我相关，因为我遇到的问题在Firefox 3& 4和Google Chrome。
有人知道如何让列表项目符号（光盘）显示在每个订单项的顶部？
看起来像 Vertical-align：text-top; a href =http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align> see spec ）。我相信的原因是，你正在创建高的直线块，正在对齐的盒子的顶部，被向上推高的内联框，因此对齐到顶部不做你想要的。但是，我相信使用文本顶部将它与文本的顶部（和项目符号点）对齐。
http://jsfiddle.net/Yayuj/ 是一个小小的做我想要的（我相信），并且主要是从您的CSS更新的部分：
#billing_form .discount .item
{
display：inline-block;
width：190px;
vertical-align：text-top;
}
与上面粘贴的任何其他差异应该是美容。 >
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?
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.
这篇关于在垂直底部显示ListItem光盘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
