标签: html-lists

我内置菜单<ul>和<li>标签.我想在部分之间有小分隔符.对于分隔符,我只是设置背景颜色和短高度<li>.看起来很不错......除了在IE7中,<li>似乎拒绝改变它的高度比其他所有<li>s 都短<ul>.我尝试过不同的方法来影响分隔符的高度<li>(高度,行高,字体大小)但没有成功.

我有一个修复程序将保持分隔符高度不变,并在IE 7中为整个背景着色,但这不是我想要的外观(分隔符太大).谁能想到另一种控制<li>标签高度的方法？

这是一个示例 - 在IE8切换兼容性视图中将显示问题:

<style type="text/css">
.menu {
    width:100px;
}
.menu ul {
    list-style-type:none; 
    border-top: solid 1px red;
    padding: 0px;
    margin:0px;
}
.menu ul li {
    border-bottom: solid 1px red;
    padding: 0px;
    margin:0px;
    white-space:nowrap;
}
.menu ul li a {
    font-size: 13px;
    text-decoration: none;
    color: black;
    display: block;
    padding: 3px;
}
.menu ul li a:hover {
    color: blue;
    text-decoration: underline;
} …

我很高兴得知CSS让我说list-style-type: cjk-ideographic并得到我的有序列表编号为一,二,三,四.不幸的是,它显示为"一".(2个字符:汉字/汉字1,然后是ASCII周期).

我环顾四周,发现CSS规范实际上是这么说的:

cjk表意编号系统的后缀是一个点.U + 002E.

(这似乎很奇怪,因为日语甚至不使用U + 002E来结束句子.我在这里的所有文字都使用了?U + 3001后的数字.)

有没有办法获得自动"cjk-ideographic"编号,但是省略了这个后缀字符,或者(更好的是)告诉它使用U + 3001作为后缀字符？

所以,我有一个项目列表,如:

<ul id="listHolder">
    <li id="l1">List item 1</li>
    <li id="l2">List item 2</li>
    <li id="l3">List item 3</li>

ajax调用是定期触发的,我可能需要重新排序列表(通过使其中一个较低的项成为列表中的第一个).只需更改#listHolder的HTML即可轻松完成,但我想设置它的动画,以便相应的项目向上移动到正确的位置,其他项目向下移动.

我不知道从哪里开始= /

NB.它不必是一个列表:div或任何其他元素都可以.

可以说我有一个这样的列表:

<ul style="list-style-type: upper-latin;">
  <li>Lorem</li>
  <li>Ipsum</li>
</ul>

(list-style-type可能是任何东西 - 上罗马,片假名,低希腊)

list-style-type: upper-latin;将在每个列表项的前面放一个字母(从A开始).有没有办法获得任何给定列表项的这封信？我可以使用jQuery .index()或类似的方法迭代列表.

或者,也许有办法从风格中提取标记？

这里的答案仅适用于拉丁字母列表.

我试图将自定义图像设置为子弹.当我使用背景或背景图像标签时它是工作但不能与列表类别正确对齐.当我使用list-style-image时,它不会将图像显示为子弹.

问题:

CSS

萤火

当我将鼠标移到上面时,图像也会显示在萤火虫中

错误的最终输出

方案:

正确输出我想要的

我想知道我们是否可以在列表样式中使用加号.而不是Disc,Circle ......在<li>List风格中,我们可以加号吗？

li {list-style: disc...}

我正在使用一个自编的编号列表.如何读取start属性并使用CSS将其添加到计数器？

HTML

<ol>
    <li>Number One</li>
    <li>Number Two</li>
    <li>Number Three</li>
</ol>
<ol start="10">
    <li>Number Ten</li>
    <li>Number Eleven</li>
    <li>Number Twelve</li>
</ol>

CSS

ol {
    list-style-type: none;

    /* this does not work like I expected */
    counter-reset: lis attr(start, number, 0);

}
li {
    counter-increment: lis
}
li:before {
    content: counter(lis)". ";
    color: red;
}

小提琴

我有一个简单的列表,列表项没有任何特殊类.

<ul>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  etc..
</ul>

在前端看起来像这样:

我希望能够定位li每行中的最后一行(以绿色突出显示的那一行).但是,我不确定,因为这些li没有任何类,并且取决于用户的屏幕,它可能是一个不同的li,最终连续排在最后.有没有办法瞄准li连续的最后一个？

编辑:我认为有一些混乱.所有li物品都在一个ul.

如果ul有多个类的li项,是否可以使用:last-child获取特定类的最后一项？

例如,请考虑以下事项:

<ul class="test">
    <li class="one">
    <li class="one">
    <li class="one">
    <li class="two">
    <li class="two">
</ul>

我想为最后一个具有"one"类(即列表中的第三个)的li添加一些样式.

我试过跟随,它不起作用.

ul.test li.one:last-child 

自从我开始使用HTML,CSS等以来,我一直注意到的一个一致的事情是导航条似乎几乎总是以列表形式呈现,在某些变体中:

HTML:

<ul>
 <li><a href="link1.html">link 1</a></li>
 <li><a href="link2.html">link 2</a></li>
 <li><a href="link3.html">link 3</a></li>
 <li><a href="link4.html">link 4</a></li>
</ul>

^{还有<li>里面的<a>}

CSS:

ul{list-style-type:none;}
li{display:inline-block;}

现在HTML5基本上是相同的,但在<nav>标签或任何说"这是浏览器/屏幕阅读器的一些导航内容"的任何东西.

我的问题是他们是否需要具有现代HTML5语义和ARIA可访问性角色的列表,还有什么好处？当然是一个链接列表,但还有其他任何实际原因吗？

我找到的理由:

• 语义,屏幕阅读器和可访问性:意见各不相同,特别是它如何使屏幕阅读器更好(或更糟糕......).但是不应该<nav>在链接周围使用HTML5 和/或相关的ARIA角色吗？是否还需要专门显示为链接列表(无序或其他)？

• 美学:在带有默认项目符号的垂直列表中,或者没有CSS,是的.但是,否则替代标记(例如<a>in <nav>)而不是<li>in <ul>将会如期望的那样容易或更容易.

• 现有用途:它在现有网站中使用很多(例如StackExchange站点,MDN,还有更多......).

• W3C <nav>规范:说链接不必在列表中,但它可以.但它也指定了<nav>"链接部分" 的内容,它还需要是"链接列表"吗？

• 向后兼容性:它经常被使用,因此应得到广泛支持,HTML5和ARIA可能无法供旧浏览器/屏幕阅读器使用.

各种帖子:

• CSS技巧 - 2013-01 - 说他们不会使用列表.然后在导航中使用列表:-S
• Dustin Brewer的文章(已存档) - 2011-06 - 被广泛提及
• Stack Overflow:我为什么要在HTML中使用UL/LI？和是否应导航栏总是被实现为列表？- 2012 - "是的,它列在列表中的链接列表".
• HTML5规范
• 布鲁斯劳森的文章 …