标签: html-lists

如何使用CSS将列表项水平连续显示？

#div_top_hypers {
    background-color:#eeeeee;
    display:inline;      
}
#ul_top_hypers {
    display: inline;
}

<div id="div_top_hypers">
    <ul id="ul_top_hypers">
        <li>&#8227; <a href="" class="a_top_hypers"> Inbox</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Compose</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Reports</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> Preferences</a></li>
        <li>&#8227; <a href="" class="a_top_hypers"> logout</a></li>
    </ul>
</div>

如何在有序列表中左对齐数字？

1.  an item
// skip some items for brevity 
9.  another item
10. notice the 1 is under the 9, and the item contents also line up

更改有序列表中的数字后面的字符？

1) an item

还有一个CSS解决方案,可以从数字更改为字母/罗马列表,而不是使用ol元素上的type属性.

我最感兴趣的是适用于Firefox 3的答案.

在一个<ul>元素中,显然可以使用line-height属性格式化行之间的垂直间距.

我的问题是,在<ul>元素中,如何设置列表项之间的垂直间距？

在Python中,创建新列表的最佳方法是什么,其列表的项目与其他列表的项目相同,但顺序相反？(我不想修改现有的列表.)

这是我遇到的一个解决方案:

new_list = list(reversed(old_list))

也可以复制old_list然后反复复制到位:

new_list = list(old_list) # or `new_list = old_list[:]`
new_list.reverse()

有没有更好的选择我忽略了？如果没有,是否有令人信服的理由(如效率)使用上述方法之一而不是另一种？

在我的网站上,我使用reset.css.它将这个添加到列表样式:

ol, ul {
    list-style: none outside none;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: …

我想要的是能够将列表中的子弹颜色更改为浅灰色.它默认为黑色,我无法弄清楚如何更改它.

我知道我可以使用图像; 如果我能帮助它,我宁愿不这样做.

经过一些搜索,我没有找到一个正确的方法来将列表中心<li>固定到一个固定的宽度div.

看看页面 ..它也不起作用!

我正在尝试找到一种方法来对有序列表中的数字进行样式化,我想为它们添加背景颜色,边框半径和颜色,以便它们可以匹配我正在使用的设计:

我猜这是不可能的,我将不得不为每个数字使用不同的图像,即

ol li:first-child{list-style-image:url('1.gif')};
ol li:nth-child(2) {list-style-image:url('2.gif');} etc...

我以为我可以使用精灵来使这个稍好一点,但是有没有更简单的解决方案？

我想知道是否有一些方法可以使用CSS更改li列表中最后一个的CSS属性.我已经研究过使用:last-child,但这看起来真的很麻烦,我无法让它为我工作.如有必要,我将使用JavaScript来执行此操作,但我想知道是否有人可以在CSS中考虑解决方案.

我使用嵌套计数器和范围来创建有序列表:

ol {
    counter-reset: item;
    padding-left: 10px;
}
li {
    display: block
}
li:before {
    content: counters(item, ".") " ";
    counter-increment: item
}

<ol>
    <li>one</li>
    <li>two</li>
    <ol>
        <li>two.one</li>
        <li>two.two</li>
        <li>two.three</li>
    </ol>
    <li>three</li>
    <ol>
        <li>three.one</li>
        <li>three.two</li>
        <ol>
            <li>three.two.one</li>
            <li>three.two.two</li>
        </ol>
    </ol>
    <li>four</li>
</ol>

我期待以下结果:

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
3. three
  3.1 three.one
  3.2 three.two
    3.2.1 three.two.one
    3.2.2 three.two.two
4. four

相反,这就是我所看到的(错误的编号):

1. one
2. two
  2.1. two.one
  2.2. two.two
  2.3. two.three
2.4 three …