html-lists 相关问题

如何将<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）在个位数之前显示一个空格，并且只对齐两位数

CSS - 如何在 WP 管理菜单上隐藏没有 CSS 类的第四个<li>

我试图在 WordPress 管理菜单中隐藏第四个，但没有成功。 我尝试访问第四个但没有成功。这是我的代码： HTML 代码： 我尝试在 WordPress 管理菜单中隐藏第四个 ，但没有成功。 我尝试访问第四个但没有成功。这是我的代码： HTML codes: <ul class="wp-submenu wp-submenu-wrap"> <li class="wp-submenu-head" aria-hidden="true">Media</li> <li class="wp-first-item"><a href="upload.php" class="wp-first-item">Library</a></li> <li><a href="media-new.php">Add New</a></li> <li><a href="upload.php?page=webpc_optimization_page">Converter for Media</a></li> </ul> CSS codes: li.wp-submenu:nth-child(4) { display: none; } OR: li.wp-submenu-wrap:nth-child(4) { display: none; } 我也尝试过使用PHP代码来隐藏它。这是它的链接： URL: https://www.mywebsite.net/admin-cpanel/upload.php?page=webpc_optimization_page php codes: add_action( 'admin_init', 'hide_admin_menu_items' ); function hide_admin_menu_items() { global $user_ID; if ( $user_ID != 1 ) { remove_menu_page('webpc_admin_page'); // Converter for media // not working } } 请告知如何从 WP 管理菜单中隐藏第四个。 提前非常感谢。 你的 CSS 错误。 li没有课wp-submenu ul.wp-submenu li:nth-child(4) { display: none; } <ul class="wp-submenu wp-submenu-wrap"> <li class="wp-submenu-head" aria-hidden="true">Media</li> <li class="wp-first-item"><a href="upload.php" class="wp-first-item">Library</a></li> <li><a href="media-new.php">Add New</a></li> <li><a href="upload.php?page=webpc_optimization_page">Converter for Media</a></li> </ul>

display:flex 是否适用于语义标签 - nav？

我想制作导航栏和内部标题标签，其中有一个 nav 标签，后跟 ul 和 3 li 标签。我想在我的导航上应用 Flex 属性，但它不起作用。 如果我放一个 div 标签而不是 nav

如何从角度调整元素的宽度：“p-multiselect”，使其始终与最宽的“li”元素一样宽？

我需要以下角度元素的帮助。 我无法使用以下 p-multiSelect 设置自动宽度。我还上传了图片，你可以看到，一些“li”元素比 p-multi 更宽......

如何对齐菜单（ul菜单）的列表元素？

我有一个列表菜单，我显示了该列表中的所有元素，这要归功于 .navigator ul { 显示：内联块； 宽度：100%； } .navigator李{ 边距：4px 50px -10px 0px； 向左飘浮; 我...

HTML 更改 LI 大小或图像

给定一个单独的我需要增加它的大小。字体大小仅在 Firefox 中有效，IE 仅将其显示为相同大小。 我可以通过其他方式更改 LI 大小，或设置其图像吗？请注意（... 鉴于一个单独的<li />我需要增加它的大小。字体大小仅在 Firefox 中有效，IE 仅将其显示为相同大小。 我可以用其他方式更改 LI 的大小，或者设置它的图像吗？请注意（我知道这很糟糕）没有 UL 元素，它是无效标记，因为它是旧系统的一部分，该设计意味着 UL 无法轻松添加。 <li>元素是内联元素，因此它们将获得内部元素的宽度。您可以将显示属性设置为“inline-block”并设置宽度。我想这会解决你的问题。 <li>是一个内联元素，你可以使用display: inline-block;让它接受宽度、高度、背景、定位等规则，同时保持其内联流程。 您还可以尝试使用 <span> 和位于文本左侧的点图像来代替无效标记。 .liSpan { display: inline-block; background-image: images/dot.png; background.position: left; padding-left: 25px; } 或者类似的东西:) 尝试调整行高，或者通过填充来增加高度。 .liSpan { line-height: 2em; padding: 1em 0; } .lispan 不应该有一个 div 元素吗？因此，您链接样式表，然后将名称注册到 div 元素，然后将其应用于它？

需要帮助对齐列表和图像（HTML CSS）

我正在尝试对齐在列表旁边的 div 语句中定义的图像。 主体{背景颜色：#3799DF; 颜色：#1B78BB； 字体系列：Arial； 保证金：0； } * { 框-

使用 CSS 删除列表缩进

当列表中的长行环绕时，我似乎无法从无序列表中删除缩进。我的清单如下： Windows用户可以使用putty Mac 用户可以使用 Terminal.app 李...

html 中的 ol 中不能有 ul

当我测试 HTML 时，出现以下验证错误。 请查看附图中的 HTML 代码。 “元素 ul 不允许作为此上下文中元素的子元素。”

如何从硒中的该表中仅获取更改（Pts）列数据（带负值）？

我正在尝试使用这个 XPath 表达式。它将获取两列的数据（带有 - 值）。但我只想获取更改（Pts）列数据。 //*[@id="div_bseindices"]/div/div/div/ul...

尝试创建 ol 网址

尝试将 href 与锚标记一起使用。然而，即使使用讲师的代码创建预览并尝试在预览中打开她的网站，我也会访问http://127.0.0.1:3002/。当您点击...

如何从嵌套数组生成ul li？

我下面有以下代码，并试图找到一种方法来生成 和 以通过 Javascript 输出无序列表。 问题）： 我如何解析以下数组来生成... 我下面有以下代码，并试图找到一种方法来生成 <ul> 和 <li> 通过 Javascript 输出无序列表。 问题： 如何解析以下数组以生成嵌套无序列表 html？ 如果我要使用递归，我将如何递归地迭代所有嵌套子级以打印嵌套无序列表？ 我尝试过但没有成功 const data = [ { name: '125313-7j', }, { name: '584996-s7', _children: [ { name: '747773-jw', }, { name: '377526-zg', _children: [ { name: '955330-wp', }, { name: '343693-9x', }, ], }, { name: '638483-y2' }, ], }, { name: '306979-mx' }, { name: '066195-o1', _children: [], }, ]; $(function() { let innerHtml = '<ul>'; data.forEach( item => { innerHTML += '<li>' + '<div>' + item.name + '</div>'; if(item._children) { // ***ISSUE*** this doesn't print all the children so i cannot recursively get all the children console.log('children', item._children); } }); innerHtml += '</ul>'; }); 预期产量 <ul> <li> <div>Name1</div> <ul> <li><div>Name2</div> .... continue the next unordered list until all children have been displayed ... </ul> </li> </ul> 就您而言，递归解决方案对我来说似乎更直观。让我分享一下我对此的见解： # Pseudocode # generateList(items) # 1. Init: html array with the opening "<ul>" tag. # Can also use string but for larger object, string concatenation might be costly. # 2. for item in items # 2.1. push('<li><div>', item.name, '</div>') # 2.2. if item has _children and the length of _children is greater than 0 # 2.2.1. push(result of calling generateNestedList recursively with item._children) # 2.3. push(closing "<\li>") # 3. push(closing "</ul>") # 4. Join the html array elements(in case you used array) into a single string and return it. # end function const data = [{ name: '125313-7j', }, { name: '584996-s7', _children: [{ name: '747773-jw', }, { name: '377526-zg', _children: [{ name: '955330-wp', }, { name: '343693-9x', }, ], }, { name: '638483-y2' }, ], }, { name: '306979-mx' }, { name: '066195-o1', _children: [], }, ]; function generateList(items) { const html = ['<ul>']; items.forEach((item) => { html.push('<li><div>', item.name, '</div>'); if (item._children?.length > 0) { html.push(generateList(item._children)); } html.push('</li>'); }); html.push('</ul>'); return html.join(''); } const innerHtml = generateList(data); // console.log(innerHtml); document.getElementById("list-container").innerHTML = innerHtml; <div id="list-container"></div>

将菜单栏与文本和图标元素以及其外部的购物车图标垂直对齐

我有一个菜单栏，其中包含文本项和搜索图标（.main-navigation）。此外，在此菜单栏旁边但在其外部有一个购物车图标 (.site-header-cart)。我需要这些...