用于HTML中的有序和无序列表及其列表项,以及应用于它们的任何列表样式。
是否有 CSS 选择器可以将某种样式仅附加到有序列表的数字部分? 我有这样的 HTML: a b c 是否有 CSS 选择器可以将某种样式仅附加到有序列表的数字部分? 我有这样的 HTML: <ol> <li>a</li> <li>b</li> <li>c</li> </ol> 哪个应该输出: 1.a 2.b 3.c 我需要将 1.、2. 和 3. 加粗,同时将 a、b 和 c 保留为常规。 我知道<span>解决方法... 使用 计数器增量 CSS 属性 ol { margin:0 0 1.5em; padding:0; counter-reset:item; } ol>li { margin:0; padding:0 0 0 2em; text-indent:-2em; list-style-type:none; counter-increment:item; } ol>li:before { display:inline-block; width:1.5em; padding-right:0.5em; font-weight:bold; text-align:right; content:counter(item) "."; } <ol> <li>a</li> <li>b</li> <li>c</li> </ol> 新的::marker伪元素选择器已添加到CSS伪元素级别4,这使得粗体列表项编号的样式变得简单如 ol > li::marker { font-weight: bold; } 目前 Firefox 68+、Chrome/Edge 86+ 和 Safari 11.1+ 支持。 另一种简单的可能性是将列表项内容包装到 <p> 中,将 <li> 设置为粗体,将 <p> 设置为常规。从 IA 的角度来看,这也是更可取的,特别是当 <li> 可以包含子列表时(以避免将文本节点与块级元素混合)。 为了方便起见,完整示例: <html> <head> <title>Ordered list items with bold numbers</title> <style> ol li { font-weight:bold; } li > p { font-weight:normal; } </style> </head> <body> <ol> <li> <p>List Item 1</p> </li> <li> <p>Liste Item 2</p> <ol> <li> <p>Sub List Item 1</p> </li> <li> <p>Sub List Item 2</p> </li> </ol> </li> <li> <p>List Item 3.</p> </li> </ol> </body> </html> 如果您更喜欢更通用的方法(这也涵盖其他场景,例如 <li> 及其后代而不是 <p>,您可能需要使用 li > * 而不是 li > p: <html> <head> <title>Ordered list items with bold numbers</title> <style> ol li { font-weight:bold; } li > * { font-weight:normal; } </style> </head> <body> <ol> <li> <p>List Item 1</p> </li> <li> <p>Liste Item 2</p> <ol> <li> <p>Sub List Item 1</p> </li> <li> <p>Sub List Item 2</p> </li> </ol> </li> <li> <p>List Item 3.</p> </li> <li> <code>List Item 4.</code> </li> </ol> </body> </html> (检查这里的列表项 4,它是 ol/li/code,而不是这里的 ol/li/p/code。) 如果您只想像常规一样设置块级后代的样式,但又不想像“foo li > *粗体词li * foo.”这样的内联,请确保使用选择器<strong>而不是</strong>。 JSFiddle: ol { counter-reset: item; } ol li { display: block } ol li:before { content: counter(item) ". "; counter-increment: item; font-weight: bold; } 我在撰写时事通讯时遇到了类似的问题。所以我必须这样内联样式: <ol> <li style="font-weight:bold"><span style="font-weight:normal">something</span></li> <li style="font-weight:bold"><span style="font-weight:normal">something</span></li> <li style="font-weight:bold"><span style="font-weight:normal">something</span></li> </ol> 来自dcodesmith的答案https://stackoverflow.com/a/21369918/2526049有一个副作用,它将所有类型的列表变成数字。 <ol type="a"> 将显示 1. 2. 3. 4. 而不是 a。 b. C。 d. ol { margin: 0 0 1.5em; padding: 0; counter-reset: item; } ol > li { margin: 0; padding: 0 0 0 2em; text-indent: -2em; list-style-type: none; counter-increment: item; } ol > li:before { display: inline-block; width: 1em; padding-right: 0.5em; font-weight: bold; text-align: right; content: counter(item) "."; } /* Add support for non-numeric lists */ ol[type="a"] > li:before { content: counter(item, lower-alpha) "."; } ol[type="i"] > li:before { content: counter(item, lower-roman) "."; } 上面的代码添加了对小写字母、小写罗马数字的支持。在撰写本文时,浏览器不区分类型的大小写选择器,因此我猜您只能为备用 ol 类型选择大写或小写。 如果您使用Bootstrap 4: <ol class="font-weight-bold"> <li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li> <li><span class="font-weight-light">Curabitur aliquet quam id dui posuere blandit.</span></li> </ol> 这是 dcodesmith 答案的更新https://stackoverflow.com/a/21369918/1668200 当文本较长时(即行需要换行),建议的解决方案也适用:更新的 Fiddle 当您使用网格系统时,您可能需要执行以下操作之一(至少对于 Foundation 6 来说是这样 - 无法在 Fiddle 中重现它): 将 box-sizing:content-box; 添加到列表或其容器 或将 text-indent:-2em; 更改为 -1.5em P.S.:我想将此作为对原始答案的编辑添加,但被拒绝了。 您还可以将 放在 a、b、c 周围,然后在 CSS 中将 ul 加粗。 示例 ul { font-weight: bold; } <ul><li><span style="font-weight:normal">a</span></li></ul> Tailwind 粗体 小数点标记: <ol class="list-decimal"> <li class="marker:font-bold"> ... 答案很晚了,但希望有人会发现这很有用 我遇到过这样的情况: 列出项目 a.列出项目 第一项是<strong>,子元素是正常体重和“1”。只是不会大胆。 我的解决方案是通过 jQuery: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { if ($('ol').has('li').has('strong')) { $('ol ').css('font-weight', 'bold'); $('ol > li > ol').css('font-weight', 'normal'); } }); </script> 希望这对某人有帮助!
我有一个网站的 HTML 文件,其中包含一个用于输入食谱并在下面显示它们的表单。每个食谱都有标题、成分部分和说明部分,并且每个食谱都必须...
我有以下代码可以生成可折叠列表: .collapsibleList li > 输入 + * { 显示:无; } .collapsibleList li > 输入:选中 + ...</desc> <question vote="0"> <p>我有以下代码可以生成可折叠列表:</p> <pre><code><html> <head> <style> .collapsibleList li > input + * { display: none; } .collapsibleList li > input:checked + * { display: block; } .collapsibleList li > input { display: none; } .collapsibleList label { cursor: pointer; } </style> </head> <body> <ul class="collapsibleList"> <li> <label for="mylist-node9"> <b>TypeOne</b> </label> <input type="checkbox" id="mylist-node9" /> <ul style="list-style-type:disc"> <li> tst </li> </ul> </li> </ul> </body> </html> </code></pre> <p>我想在开始页面时扩展此列表。但我不知道如何..</p> </question> <answer tick="false" vote="0"> <p>只需添加一个 <pre><code>checked</code></pre> 属性</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>.collapsibleList li>input+* { display: none; } .collapsibleList li>input:checked+* { display: block; } .collapsibleList li>input { display: none; } .collapsibleList label { cursor: pointer; }</code></pre> <pre><code><ul class="collapsibleList"> <li> <label for="mylist-node9"> <b>TypeOne</b> </label> <input type="checkbox" id="mylist-node9" checked /> <!-- add checked attribute --> <ul style="list-style-type:disc"> <li> tst </li> </ul> </li> </ul></code></pre> </div> </div> <p></p> </answer> </body></html>
这个问题通过询问如何删除由视口大小引起的换行符处的分隔符来扩展“导航分隔符”。 宽视口 -> 项目 1 |第 2 项...
我想要的只是能够将列表中项目符号的颜色更改为浅灰色。它默认为黑色,我不知道如何更改它。 我知道我可以只使用图像;我宁愿不做
这是我第一次使用这个资源如此裸露。 我正在开发一款选择你自己的冒险游戏。 我需要能够获取 ul,将其存储在本地存储中,然后在另一个
我正在设计一个网站的底部部分,该网站应包含三个列表,水平排列,每个列表都有自己的点,即链接或文本。 我尝试创建一个无序列表,其中有 3...
有没有办法使用 CSS 全局更改有序列表项样式(包括嵌套列表)为方括号/圆括号而不是句号/句点? M... 有没有办法使用 CSS 全局更改有序列表项样式(包括嵌套列表)为方括号/圆括号而不是句号/句号? <ol type="1"> <li>Main list number one.</li> <li>Main list number two.</li> <ol type="a"> <li>Sublist first.</li> <li>Sublist second.</li> </ol> <li>Main list number three.</li> </ol> <ol type='I'> <li>Upper roman list one.</li> <li>Upper roman list one.</li> </ol> 产品: (1) Main list number one. (2) Main list number two. (a) Sublist first. (b) Sublist second. (3) Main list number three. (I) Upper roman list one. (II) Upper roman list two. 我不太关心支持旧版/晦涩的浏览器 - 如果它可以在最新版本的 Chrome 中运行,那对我来说就足够了。 您可以使用 list-style-type 定义自定义 @counter-styles。在下面的示例中,我扩展了与您用来用括号括起来计数器的 type 相对应的内置列表样式。 @counter-style paren-decimal { system: extends decimal; prefix: "("; suffix: ") "; } @counter-style paren-lower-alpha { system: extends lower-alpha; prefix: "("; suffix: ") "; } @counter-style paren-upper-roman { system: extends upper-roman; prefix: "("; suffix: ") "; } [type="1"] { list-style: paren-decimal; } [type="a"] { list-style: paren-lower-alpha; } [type="I"] { list-style: paren-upper-roman; } <ol type="1"> <li>Main list number one.</li> <li>Main list number two.</li> <ol type="a"> <li>Sublist first.</li> <li>Sublist second.</li> </ol> <li>Main list number three.</li> </ol> <ol type='I'> <li>Upper roman list one.</li> <li>Upper roman list one.</li> </ol>
我有一个有序列表,其中包含“列表编号”的特定值。 我已经看到了增加值的列表的解决方案,但是我的值需要具体且不能更改。 超文本标记语言 我有一个有序列表,其中包含“列表编号”的特定值。 我已经看到了增加值的列表的解决方案,但是我的值需要具体且不能更改。 HTML <td class="list"> <ol class="junkfood"> <li value="2">Cookies®</li> <li value="1">Chocolate</li> <li value="2">Brownies</li> <li value="10">Ice cream sandwich</li> </ol> </td> 现在它打印出来为 2. Cookies 1. Chocolate 2. Brownies 10. Ice cream sandwich 我需要将数字打印为“值” 2 Cookies 1 Chocolate 2 Brownies 10 Ice cream sandwich 那么你不需要有序列表,你需要无序列表(ul) <ul> <li value="2">2 Cookies®</li> <li value="1">1 Chocolate</li> <li value="2">2 Brownies</li> <li value="10">10 Ice cream sandwich</li> </ul> 我将值包含在列表项本身中,如您的示例所示。 2 块饼干 1 块巧克力 2 个布朗尼蛋糕 10 冰淇淋三明治 HTH, 艾瑞克 如果你使用数据属性,你想要的 CSS 完全可以实现: ol { list-style:none; } li:before { content:attr(data-value) ' '; } <ol class="junkfood"> <li data-value="2">Cookies®</li> <li data-value="1">Chocolate</li> <li data-value="2">Brownies</li> <li data-value="10">Ice cream sandwich</li> </ol> 然而,这种方式对 HTML 的使用也是相当奇怪的,因为您使用 ordered 列表来表示 unordered 数据。因此,在我的示例中,您应该将 <ol> 替换为 <ul>,以确保语义正确。相同的 CSS 以这种方式应用就很好,这只是演示性的。
我是一名初学者编码器,一直在尝试让我的顶部导航栏与我的链接一起在选项卡之间切换。它显示选项卡正在 URL 中切换,但它不会改变内容
Javascript 显示年份列表和月份列表,并使用选择来构建要显示的 pdf 文档的文件名
我想使用Javascript显示年份列表和月份列表,并使用每个列表中的选择来构建格式为month_year.pdf的文件名,然后显示该文件。 我也需要...
Java 脚本显示年份列表和月份列表,并使用选择来构建要显示的 pdf 文档的文件名
我想使用Java脚本显示年份列表和月份列表,并使用每个列表中的选择来构建格式为month_year.pdf的文件名,然后显示该文件。我也需要
我在每个网页上都有一个基本的目录,并且有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 内渲染有序列表,但它以纯文本形式出现,例如“flour”而不是“1.flour”。 渲染其他 html 内容可以工作,但已排序...
我正在使用 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 [] 并使用 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; }
这是我的代码: $("#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 中创建带有破折号(即 - 或 - 或 - -)的列表样式,即 abc 输出: - abc 原来如此...