html-lists 相关问题

展开目录中的当前列表

我在每个网页上都有一个基本的目录，并且有CSS在用户当前所在的部分周围添加边框。这只是一个展示其工作原理的片段： 我在每个网页上都有一个基本的目录，并且有 CSS 在用户当前所在的部分周围添加边框。这只是一个展示其工作原理的片段： <ol> <li><a href="#">Home Lab Overview</a> <ol class="toc-collapse-level"> <li><a href="#">Diagrams</a> <ol> <li><a href="#s1">Full Network Diagram</a></li> <li><a href="#s2">Reverse Proxy and VPN Diagram</a></li> </ol> </li> </ol> </li> </ol> class=toc-collapse-level 表示要折叠的最外层列表。 我正在使用以下脚本使列表可折叠。 (t => { const e = "faq-list", n = "faq-clicked"; function l(l, o) { const i = l.children; if (0 === i.length) return; for (let t of i) if (t.childElementCount < 2) return; let c = l.classList; if (c.length > 0 && !c.contains(e)) return; c.add(e); const s = t.createElement("span"); let a = !1; s.className = "faq-button", s.innerText = "⊕", s.onclick = function() { a = !a, this.innerText = a ? "⊖" : "⊕"; for (const t of l.children) t.classList.toggle(n, a) }, l.before(s); for (let t = 0; t < i.length; t++) { let e = i[t]; e.id = "faq-" + (o ? o + "-" : "") + (t + 1); let l = e.firstElementChild; l.insertAdjacentHTML("beforeend", ` <span class="anchor"><a href="#${e.id}">#</a></span>`), location.hash === "#" + e.id && (e.scrollIntoView(), e.classList.add(n)), l.onclick = function(t) { e.classList.toggle(n) } } } const o = t.querySelectorAll(["div", "main", "section", "article"].map((t => t + ":not(.footnotes) > ol")).join(",")); for (let t = 0; t < o.length; t++) { l(o[t], o.length > 1 ? t + 1 : 0) } })(document); 以及用于可折叠列表工作的 CSS： .faq-button { cursor: pointer } .faq-list>li>:first-child { display: block; cursor: pointer; background: #fafafa; margin: -.5em; padding: .5em } .faq-list>:not(.faq-clicked)>* { display: none } .faq-button { float: right; margin-left: 1em } .faq-list .anchor { display: none } .faq-list>li:hover .anchor { display: inline } .faq-list>li { border: 1px solid #eee; padding: .5em } 问题是我不确定如何在页面加载时扩展当前部分。 要使当前部分在页面加载时展开，首先您必须确定哪个是当前部分。 我认为可以同时展开多个部分（例如，当它们在屏幕上可见时）。 因此，要查找所有可见部分，我们可以使用以下脚本： function isElementVisible(el) { var rect = el.getBoundingClientRect(), vWidth = window.innerWidth || document.documentElement.clientWidth, vHeight = window.innerHeight || document.documentElement.clientHeight, efp = function (x, y) { return document.elementFromPoint(x, y) }; // Return false if it's not in the viewport if (rect.right < 0 || rect.bottom < 0 || rect.left > vWidth || rect.top > vHeight) return false; // Return true if any of its four corners are visible return ( el.contains(efp(rect.left, rect.top)) || el.contains(efp(rect.right, rect.top)) || el.contains(efp(rect.right, rect.bottom)) || el.contains(efp(rect.left, rect.bottom)) ); } 来源：如何判断 DOM 元素在当前视口中是否可见？ 现在您可以扩展您的脚本并检查每个部分是否可见，如果可见则切换“常见问题解答”。 ... const o = t.querySelectorAll(["div", "main", "section", "article"].map((t => t + ":not(.footnotes) > ol")).join(",")); for (let t = 0; t < o.length; t++) { l(o[t], o.length > 1 ? t + 1 : 0) // This is the new code if(isElementVisible(o[t])){ o[t].classList.toggle("faq-clicked"); } }

如何将有序列表呈现为 div 内的 HTML 内容？

您好，我正在尝试在 div 内渲染有序列表，但它以纯文本形式出现，例如“flour”而不是“1.flour”。 渲染其他 html 内容可以工作，但已排序...

Cakephp 输入表单视图作为无序列表

我正在使用 cakephp 2.x 开发一个网站。 现在，我使用 Cakedc/search 创建一个表单。该表单有输入（选择/下拉列表）。 但列表太长了，所以我希望下拉列表显示为 unor...

如何通过CSS在UL/LI html列表中设置项目符号颜色，而不使用任何图像或span标签[重复]

想象一个简单的未排序列表，其中包含一些 项目。现在，我通过 list-style:square; 将项目符号定义为方形。但是，如果我用 color 设置 项目的颜色... 想象一个简单的未排序列表，其中包含一些 <li> 项目。现在，我已经通过 list-style:square; 将项目符号定义为方形，但是，如果我使用 <li> 设置 color: #F00; 项目的颜色，那么 所有 都会变成红色！ 虽然我只想设置方形项目符号的颜色。有没有一种优雅的方式来定义CSS中项目符号的颜色... ...不使用任何精灵图像或跨度标签！ HTML <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <ul> CSS li{ list-style:square; } 最常见的方法是这样做： ul { list-style: none; padding: 0; margin: 0; } li { padding-left: 1em; text-indent: -.7em; } li::before { content: "• "; color: red; /* or whatever color you prefer */ } <ul> <li>Foo</li> <li>Bar</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> </ul> JSFiddle：http://jsfiddle.net/leaverou/ytH5P/ 适用于所有浏览器，包括 IE 8 及更高版本。 前段时间浏览，发现了这个网站，你尝试过这个替代方案吗？ li{ list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAE0lEQVQIW2NkYGD4D8RwwEi6AACaVAQBULo4sgAAAABJRU5ErkJggg=="); } 听起来很难，但你可以制作自己的 png 图像/图案这里，然后复制/粘贴你的代码并自定义你的项目符号 =) 仍然很优雅？ 编辑： 遵循@lea-verou在另一个答案上的想法并应用这种外部源增强的哲学，我得出了另一个解决方案： 将 Webfont 图标库的样式表嵌入您的头脑中，在本例中为 Font Awesome： <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> 从 FontAwesome cheatsheet（或任何其他网络字体图标）获取代码。 i.e.: fa-angle-right [&#xf105;] 并使用 f... 的最后一部分，后跟这样的数字，也带有 font-family： li:before { content: "\f105"; font-family: FontAwesome; color: red; /* or whatever color you prefer */ margin-right: 4px; } 就是这样！现在您也有了自定义项目符号提示 =) 小提琴 我只是这样解决这个问题，它应该适用于所有浏览器： ul li { color: red } ul li span { color: blue; } <ul> <li><span>Foo</span></li> <li><span>Bar</span></li> <li><span>Bat</span></li> </ul> CSS 3 Lists 模块的当前规范确实指定了 ::marker 伪元素 可以完全满足您的需求； FF已测试 不支持 ::marker，我怀疑 Safari 或 Opera 是否有它。 IE当然不支持。 所以现在，唯一的方法是使用带有 list-style-image 的图像。 我想你可以用 li 包裹 span 的内容，然后你可以设置每个的颜色，但这对我来说似乎有点老套。 一种方法是将 li:before 与 content: "" 一起使用，并将其样式设置为 inline-block 元素。 这是一个工作代码片段： ul { list-style-type: none; /* no default bullets */ } ul li { font-family: Arial; font-size: 18px; } ul li:before { /* the custom styled bullets */ background-color: #14CCBB; border-radius: 50%; content: ""; display: inline-block; margin-right: 10px; margin-bottom: 2px; height: 10px; width: 10px; } <ul> <li>Swollen joints</li> <li>Pain in hands and knees</li> <li>Redness around joints</li> <li>Constant fatigue</li> <li>Morning stiffness in joints</li> <li>High fevers</li> <li>Rheumatoid nodules, which develop around joints</li> </ul> 然而，另一种解决方案是使用带有 :before 的 border-radius: 50% 伪元素。这适用于所有浏览器，包括 IE 8 及更高版本。 使用 em 单元可以响应字体大小的变化。您可以通过调整 jsFiddle 窗口的大小来测试这一点。 ul { list-style: none; line-height: 1em; font-size: 3vw; } ul li:before { content: ""; line-height: 1em; width: .5em; height: .5em; background-color: red; float: left; margin: .25em .25em 0; border-radius: 50%; } <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <ul> jsFiddle 您甚至可以使用 box-shadow 创建一些漂亮的阴影，而使用 content: "• " 解决方案看起来不太好。 我尝试过这个，但事情对我来说变得很奇怪。 （在本教程的 :after {content: "";} 部分之后，CSS 停止工作。我发现您只需在 color:#ddd; 项目本身上使用 li 即可为项目符号着色。 这是一个示例。 li{ color:#ff0000; list-style:square; } a { text-decoration: none; color:#00ff00; } a:hover { background-color: #ddd; } 我为此使用 jQuery： jQuery('li').wrapInner('<span class="li_content" />'); & 一些 CSS： li { color: red; } li span.li_content { color: black; } 可能有些过分，但如果您正在为 CMS 编码并且不想要求编辑在每个列表项中添加额外的跨度，那么这会很方便。 我建议给LI一个background-image和padding-left。 list-style-image属性在跨浏览器环境中很不稳定，并且添加额外的元素（例如跨度）是不必要的。 所以你的代码最终会看起来像这样： li { background:url(../images/bullet.png) 0 0 no-repeat; list-style:none; padding-left:10px; } 您可以做的最简单的事情是将<li>的内容包装在<span>或等效物中，然后您可以独立设置颜色。 或者，您可以使用所需的项目符号颜色制作图像，并使用 list-style-image 属性进行设置。 在多行条目中具有完美缩进的Lea Verou解决方案的变体可能是这样的： ul{ list-style: none; position: relative; padding: 0; margin: 0; } li{ padding-left: 1.5em; } li:before { position: absolute; content: "•"; color: red; left: 0; } 我知道这篇文章的答案有点晚了，但仅供参考...... CSS ul { color: red; } li { color: black; } 项目符号颜色在 ul 标签上定义，然后我们将 li 颜色切换回来。 我正在添加我的解决方案来解决这个问题。 我不想使用图像，验证器会因为你在 CSS 中使用负值而惩罚你，所以我这样做： ul { list-style:none; padding:0; margin:0; } li { padding-left:0.75em; position:relative; } li:before { content:"•"; color:#e60000; position:absolute; left:0em; } 以 Lea 的演示为例，这是制作带边框的无序列表的不同方法：http://jsfiddle.net/vX4K8/7/ HTML <ul> <li>Foo</li> <li>Bar</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> <ul> <li>Son</li> <li>Of</li> <ul> <li>Foo</li> <li>Bar</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</li> </ul> </ul> </ul> CSS ul { list-style: none; margin: 0; } ul:first-child { padding: 0; } li { line-height: 180%; border-bottom: 1px dashed #CCC; margin-left: 14px; text-indent: -14px; } li:last-child { border: none; } li:before { content: ""; border-left: 4px solid #CCC; padding-left: 10px; } Lea Verous 解决方案很好，但我想更好地控制子弹的位置，所以这是我的方法： .entry ul { list-style: none; padding: 0; margin: 0; /* hide overflow in the case of floating elements around ... */ overflow: hidden; } .entry li { position: relative; padding-left: 24px; } .entry li:before { /* with absolute position you can move this around or make it bigger without getting unwanted scrollbars */ position: absolute; content: "• "; color: #E94E24; font-size: 30px; left: 0; /* use fonts like "arial" or use "sans-serif" to make the dot perfect round */ font-family: Arial, sans-serif; } 这样就可以了.. li{ color: #fff; }

列表项未出现在 Ul 中

这是我的代码： $("#showing").append("" + App.vrijemeObjavljiva... 这是我的代码： $("#showing").append("<ul id='vrijemeObjava'"); for(i=0;i<App.vrijemeObjavljivanja.length;i++) { $("#showing").append("<li><strong>" + App.vrijemeObjavljivanja[i] + "</strong></li>"); } $("#showing").append("</ul>"); 这是在 FB.api 调用中进行的。 “App.vrijemeObjavljivanja 是一个日期数组，我想将其放入 ul 中。该数组放在 <li></li> 中，但不在 <ul> 中。 最终结果如下所示。 <ul id='vrijemeObjava'></ul> <li>...</li> <li>...</li> <li>...</li> 有人可以告诉我为什么列表项出现在</ul>之后。 追加时，您追加了整个元素（开始标签和结束标签）。试试这个： $ul = $("<ul id='vrijemeObjava'></ul>"); for(i=0;i<App.vrijemeObjavljivanja.length;i++) { $ul.append("<li><strong>" + App.vrijemeObjavljivanja[i] + "</strong></li>"); } $("#showing").append($ul);

如何使用Python和SeleniumBase/Selenium滚动到动态加载列表中的特定元素<ul>？

我有一个包含超过 50 个列表项的无序列表元素，但最初只加载前 10 个。我需要使用 SeleniumBase 滚动，但如果你知道它如何使用 Selenium 工作，也许可以......

“看起来像”锚链接内的项目符号列表的元素

我正在我的页面上创建一个元素，如下所示： 免费入场 店内20%折扣 第一时间了解最新课程 &l...

HTML 列表样式类型破折号

有没有办法在 HTML 中创建带有破折号（即 - 或 - 或 - -）的列表样式，即 abc 输出： - abc 原来如此...

如何在类似层次结构的无序列表中链接复选框元素？

我希望链接我的复选框：当我单击 2 级复选框时，我希望从 3 级开始影响所有复选框。到目前为止，我只能想到这个（我单击了 l.. .

如何将嵌套编号列表格式化为度数？

嵌套编号列表有一个非常酷的方法： 奥尔{ 列表样式类型：无； 计数器重置：item var(--start-value, 0); } ol > li:之前{ 内容：计数器（项目，&</desc> <question vote="1"> <p>有一个非常酷的嵌套编号列表方法：</p> <pre><code>&lt;style&gt; ol { list-style-type: none; counter-reset: item var(--start-value, 0); } ol &gt; li:before { content: counters(item, &#34;.&#34;) &#34;. &#34;; counter-increment: item } &lt;/style&gt; </code></pre> <p>有类似的东西可以将嵌套编号列表格式化为学位吗？</p> <pre><code>1. some text 1&lt;sup&gt;1&lt;/sup&gt;. some text 1&lt;sup&gt;2&lt;/sup&gt;. some text 1&lt;sup&gt;3&lt;/sup&gt;. some text 2. some text 2&lt;sup&gt;1&lt;/sup&gt;. some text 3. some text </code></pre> <p> CSS 中的“内容”规则无法处理 html 标签</p> </question> <answer tick="false" vote="0"> <p>我将使用另一个伪元素并使用 <pre><code>position: absolute</code></pre> 放置计数器。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>ol { list-style-type: none; counter-reset: item var(--start-value, 0); font-size: 20px; } li { position: relative; } ol &gt; li:before { content: counter(item) &#34; . &#34;; counter-increment: item; } li li:after { content: counter(item); position: absolute; font-size: .6em; left: .7em; top: -.4em; }</code></pre> <pre><code>&lt;ol&gt; &lt;li&gt;some text&lt;/li&gt; &lt;li&gt; &lt;ol&gt; &lt;li&gt;some text&lt;/li&gt; &lt;li&gt;some text&lt;/li&gt; &lt;li&gt;some text&lt;/li&gt; &lt;/ol&gt; &lt;/li&gt; &lt;li&gt;some text&lt;/li&gt; &lt;li&gt; &lt;ol&gt; &lt;li&gt;some text&lt;/li&gt; &lt;li&gt;some text&lt;/li&gt; &lt;li&gt;some text&lt;/li&gt; &lt;/ol&gt; &lt;/li&gt; &lt;/ol&gt;</code></pre> </div> </div> <p></p> </answer> </body></html>

CSS HTML 和 Javascript

当我设置导航项目位置时如何解决这个问题固定它在我向下滚动时消失项目。顺便说一句我使用了z-index但它不起作用.css和html 我尝试使用 z-index 来...

时间轴应使用什么类型的列表？

我正在做的在线练习给出了构建时间线和有序列表的解决方案。 我使用描述列表构建了时间线，因为我认为麻木会看起来很奇怪......

如何将<li>中的<ol>的数字垂直放置在中心？

我正在设计，但我希望数字垂直居中对齐，我已经在这个问题上坚持了一个多小时了。 #ScoresList { 边距：0 0 0 25px； 列表样式位置：我...

CSS 问题我无法让它在移动设备上正确显示

“我遇到了一个问题，在我的计算机上一切看起来都很好，但在手机上却很糟糕。这些字段造成了最大的麻烦；我似乎无法让它们在 o...

元素 ul 的样式[重复]

和 常量图像 = [ { 网址: , 替代： , }, document.body.style.backgroundColor = "#0009"; const imageGalleryItem = 文档。

父菜单下的位置子菜单在 IE/FF 中不起作用

我有两层菜单 - 一个 ul 和另一个嵌套的 ul， - 一个带有下拉子菜单的菜单，例如： 菜单项 菜单项... 我有两层菜单 - 一个 ul 和另一个嵌套的 ul， - 带有下拉子菜单的菜单，例如： <div id="menu"> <ul> <li>Menu item</li> <li>Menu item <ul> <li>Sub Menu item</li> <li>Sub Menu item</li> </li> </ul> <li>Menu item <ul> <li>Sub Menu item</li> <li>Sub Menu item</li> </li> </ul> </li> </ul> </div> 第一个 ul 内联显示，而第二个 ul 显示块并使用 JQuery 隐藏和显示。 我有以下 CSS 将子菜单 ul 放置在其各自的父菜单 li 下： #menu UL LI { list-style-type: none; display: inline; padding: 10px; position: relative; } #menu UL LI UL { display: none; z-index: 999; position: absolute; } #menu UL LI UL LI { display: block; width: 100px; } 我的问题是子菜单项没有出现在 FireFox 和 IE 中各自的父菜单项下。但它在 Chrome 和 Safari 中运行良好。 我认为这是正确的方法，但有人知道更好的方法吗？ 要达到您想要的状态，需要进行一些小的更改： #menu ul li { + display: inline-block; - padding: 10px; + padding: 0 10px 0 10px; } #menu ul li ul li { + padding: 10px; } 无需重新发明轮子，更灵活： http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-a-kick-butt-css3-mega-drop-down-menu/ 演示： http://nettuts.s3.amazonaws.com/819_megamenu/demo/index.html 此外，如果您不打算使用灵活的布局，请设置固定宽度。当浏览器缩小时，您的网站就会崩溃。 让它位于正确位置的最简单方法是将其定位到父 LI。 将 left: 0 添加到您的 #menu UL LI UL css 声明中，它应该开始按照您想要的方式运行。 如果您从网站复制了标记，那么可能是这个有问题。您的开始标签和结束标签不匹配。我已经在这里解决了这个问题： <div id="menu"> <ul> <li>Menu item</li> <li>Menu item <ul> <li>Sub Menu item</li> <li>Sub Menu item</li> </ul> </li> <li>Menu item <ul> <li>Sub Menu item</li> <li>Sub Menu item</li> </ul> </li> </ul> </div> 我刚刚对您的 CSS 进行了一些快速修改，这可以帮助您。 #menu ul { background: blue; } #menu ul li { list-style-type: none; width: 100px; } #menu ul > li { display: inline-block; position: relative; padding: 10px; height: 20px; background: red; } #menu li > ul { display: none; position: absolute; left: 0px; top: 40px; z-index: 999; background: yellow; } #menu li > ul > li { display: block; background: green; }

删除嵌套列表中的双项目符号

嵌套列表有双项目符号。一个用于 li，另一个用于子列表。 例子 项目 项目 ... 嵌套列表有双项目符号。一个用于 li，另一个用于子列表。 示例 <ul> <li>item</li> <li>item</li> <li> <ul> <li>item</li> <li>item</li> <li>item</li> </ul> </li> </ul> 您不能仅在外部样式表中执行此操作（我想您会想要这样做）。原因是 CSS 中没有选择器可以选取那些将 li 元素作为第一个子元素的 ul 元素。所以你的选择是（除了无限期地等待直到CSS有一个“parent选择器”......）： 将 class 添加到此类 li 元素并使用类选择器。这通常是首选方式。 使用可识别此类 li 元素并处理它们的 JavaScript，例如为它们添加一个类。 使用内联 CSS，即那些 style 元素中的 li 属性。 如果我使用样式你介意吗？ 更新了 代码： <ul> <li>item</li> <li>item</li> <li style="list-style:none"> <ul> <li>item</li> <li>item</li> <li>item</li> </ul> </li> </ul> <ol> <li>item</li> <li>item</li> <li style="list-style:none"> <ol> <li>item</li> <li>item</li> <li>item</li> </ol> </li> </ol> 另一种方法可能是运行 LI 列表并通过检测子节点来添加样式。 示例 代码（HTML相同）： var li = document.getElementsByTagName("li"); for (var i=0, max=li.length; i < max; i++) if (li[i].childNodes.length > 1) li[i].style.listStyle = "none"; 嵌套列表应该是列表项之一的子项，如下所示： <ul> <li>item</li> <li>item <ul> <li>item</li> </ul> </li> </ul> 这是有效的 HTML。 在现代 CSS 中，您可以像这样使用 has-selector： ul li:has(ul), ol li:has(ol) { list-style: none; } 请注意，尚未在所有浏览器中完全支持此功能，但根据 Caniuse 目前的覆盖率相当不错（在撰写本文时为 86.19% 的覆盖率）。 快速破解：删除列表项： <ul> <li>item <li>item <ul> <li>item <li>item <li>item </ul> </ul> 如果您不关闭标签，浏览器将正确呈现它，即没有额外的项目符号。注意：这是有效的 html，因为您不需要关闭 <li> 标签。 JSFIDDLE 两个示例 来源：谷歌 “与 XHTML 不同，即使使用 MIME 类型 text/html 进行交付，也允许作者省略某些标签。” 来自谷歌： 如果您有一个标记为 List item 的项目列表，您可以只写 List item... 省略可选标签可以使您的 HTML 保持正式有效...

如何在网页上显示API的数据

我有一个API URL http://api.openchargemap.io/v2/poi/?output=json&countrycode=NL&maxresults=10 我想以列表格式在网页中显示这些数据，但我不知道该在哪里...

如何在 HTML (OL LI) 上将数字和列表加粗而不影响子列表？

我正在尝试制作一个像这张图片一样的列表，但我想我做不到。 我只能将列表加粗，但无法将使用生成的数字加粗，我也想知道如何获取...

html 中有序列表的正确缩进

我无法获得有序列表来显示正确的缩进。 数字全部右对齐。 因此浏览器（Chrome）在个位数之前显示一个空格，并且只对齐两位数