标签: html-lists

我有一个UL

border: 1px solid grey;

它包含几个LI

border-bottom: 1px dotted grey;

以视觉方式保持物品分开.但现在最后一个LI有虚线边框和UL固体边框!这看起来很烦人.我怎么能避免这种情况？有没有办法在LI之间放置边界而不是在它们之后？

我想知道我应该使用哪些标签进行布局.在语义上对我来说都是一个表和一个列表.我如何能够实现那些强调并保持正确的标记？

自从我开始使用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规范
• 布鲁斯劳森的文章 …

我有一个很长的UL列表,我需要在较小的列表中分解,每个列表包含大约20个项目.

我以为我可以用类似的东西

$(function() {
    $("ul li:nth-child(20n)").after("</ul><ul>");
});

但事实并非如此.知道如何以最小的CPU使用jQuery吗？

我有一个HTML列表.浏览器应该看到列表的存在并相应地排列元素,但是我不希望它在每个元素旁边显示一个子弹.也就是说,正常列表如下所示:

• 文字A.
• 文字B.
• 文字C.

我希望我的列表看起来像这样:

文本
文本乙
文C

我可以在我的网站上使用<ul>和<li>标签制作项目符号列表吗？

• 元素一
• 元素二
甚至这个不在<li>标签中的行也是缩进的

我想缩进一些元素,但默认距离太大而sans-indent太少.

我正在尝试更改一个列表项的背景颜色,而其他列表项有另一种背景颜色.

这就是我所拥有的:

<style type="text/css">
    
ul.nav li
{
  display:inline;
  padding:1em;
  margin:1em;
  background-color:blue;
}
    
    
.selected
{
  background-color:red;
}
   

<ul class="nav">
 <li>Category 1</li>
 <li>Category 2</li>
 <li class="selected">Category 3</li>
 <li>Category 4</li>
</ul>

这产生的是具有蓝色背景的所有列表项(来自"nav"类),就好像没有"选定"类一样.但是,当我从"nav"类中取出背景颜色时,我得到了带有"selected"类的列表项的红色背景.

我想将"选定"类用于页面上的其他项目(即其他列表项,div等).

我该如何解决这个问题？

先感谢您.

我正在使用本文中的说明创建多列列表:

http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

简而言之,它表示要按照以下方式做一些事情:

HTML:

<div class='block'>
  <ul>
    <li>
      Item1
    </li>
    <li>
      Item2
    </li>
    <li>
      Item3
    </li>
  </ul>
</div>

CSS:

.block {
    border: 1px solid black;
    padding: 10px;
}
.block ul {
    width: 100%;
    overflow: hidden;
}
.block ul li {
    display: inline;
    float: left;
    width: 50%;
}

它运行得非常好,但我对溢出感到难以置信:隐藏的CSS声明.

没有它,我的外部div就像这样崩溃:

http://jsfiddle.net/alininja/KQ9Nm/1/

当它包含在内时,外部div的行为与我希望的完全一样:

http://jsfiddle.net/alininja/KQ9Nm/2/

我想知道为什么overflow:hidden会触发这种行为.我希望它能切断内部的li项而不是强迫外部div扩展到必要的高度.

谢谢你的期待!

我有一个简单的js脚本,它计算无序列表所具有的子节点数.我正在尝试更改脚本,因此它不会计算包含类"hiddenItem"的div的任何子项(li).这是列表和js.

    <ul id="dlist" class="sortable">
        <li id="listItem_000002">
            <div>
                <div><a class="itemCollapse"></a>
                </div>Item 2</div>
        </li>
        <li id="listItem_000003">
            <div>
                <div><a class="itemCollapse"></a>
                </div>Item 3</div>
        </li>
        <li id="listItem_000009">
            <div>
                <div><a class="itemCollapse"></a>
                </div>Item 9</div>
        </li>
        <li id="listItem_000012">
            <div class="hiddenItem">
                <div><a class="itemCollapse"></a>
                </div>Item 12 (Hidden)</div>
        </li>
    </ul>
    <br>
    <br>

    <a class="count">Count</a>

.

    $(".count").click(function () {
        var tcount = $("#dlist").children("li").length;
        alert(tcount);
    });

在此示例中,js警告有4个项目.但是,我正在尝试更改代码,因此它会警告3个项目,因为最后一个列表项包含具有类"hiddenItem"的div.我试过使用.filter()以及其他一些横向方法而没有运气.谁有更好的主意？

这是一个工作小提琴:http://jsfiddle.net/YeDdq/1/

任何帮助,将不胜感激.谢谢!

我列出了:

<ul>
<li id="one"></li>
</ul>

然后在jQuery中我做:

 $("#one").text("one");

然而它并没有改变,我也试过使用,.val()但它没有帮助.

为什么会发生这种情况以及如何更改li文本？