html-lists 相关问题

用于HTML中的有序和无序列表及其列表项，以及应用于它们的任何列表样式。

我在Reactjs中使用dangerouslySetInnerHtml为博客页面显示一些内容，但没有显示项目符号点

我在Reactjs中使用dangerouslySetInnerHtml为博客页面显示一些内容，但没有显示要点，但是相同的代码和页面正在另一个项目中使用，那就是

reactjs webview html5-canvas html-lists dangerouslysetinnerhtml

回答 1 投票 0

我有 html 之类的东西... 我有类似 html 的东西 <ul id="sidemenu" class="wraplist wrapper-menu"> <li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)"> arrow_down <li> <li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)"> arrow_down <li> <ul> 在 ng-click=makeActive() 上，我只想将该特定 < li> 元素的值“arrow_down”更改为“arrow_right”。如果再次单击相同的按钮，我想将其更改为“arrow_down”。其余所有 < li> 的跨度文本将保持不变。我如何使用 angularjs 来做到这一点？即通过使用 angular.element？或者还有其他办法吗？ keyboardArrow 仅指一个变量。所以你必须创建两个作用域变量：keyboardArrow1和keyboardArrow2 <ul id="sidemenu" class="wraplist wrapper-menu"> <li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)"> {{ keyboardArrow1 }} <li> <li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)"> {{ keyboardArrow2 }} <li> <ul> 更新根据您的需求，这里有一个plunker。更新了我们在评论中讨论的答案。 1) 在控制器中定义 keyboardArrow1 和 keyboardArrow2: $scope.keyboardArrow1 = 'A'; $scope.keyboardArrow1 = 'B'; 2) 您现在可以像这样显示这些值： <ul> <li ng-class="{'active': active == keyboardArrow1}" ng-click="makeActive(keyboardArrow1)"> {{keyboardArrow1}} </li> <li ng-class="{'active': active == keyboardArrow2}" ng-click="makeActive(keyboardArrow2)"> {{keyboardArrow2}} </li> </ul> 请注意，我还更改了 ng-class 条件。 3) 当点击<li>时，调用makeActive(): $scope.makeActive = function(arrow) { $scope.active = arrow; }

javascript angularjs html-lists

回答 2 投票 0

多词搜索功能HTML列表过滤器

我有一个搜索功能，它使用 JavaScript 来过滤 html 列表。默认情况下，所有列表项都是隐藏的，但如果用户输入正确的关键字，则会显示。目前搜索仅返回项目...

javascript html search split html-lists

回答 3 投票 0

如何设置li标签的自定义项目符号图像？

我正在尝试将自定义图像设置为项目符号。当我使用背景或背景图像标签时，它可以工作，但无法与列表类别正确对齐。当我使用列表样式图像时，它不是

css html-lists

回答 3 投票 0

如何将正文内容复制到元标题？

我有一个在线会员目录，我们已开放该目录供 Google 抓取。所有会员列表均以组织名称作为搜索结果中的搜索结果标题。我正在努力上来...

css html-lists meta-tags page-title

回答 1 投票 0

设置 Telerik <ol> 列表字体大小的问题

实际上，即使 listItem01 字体大小更大（1,, 2, 3, 4, 5, 6, 0r 7），收到输出后标签字体大小也会变为 1，所以 h. .. 实际上 <ol> 标签字体大小在收到输出后变为 1，即使 <li>listItem01</li> 字体大小更大（1,, 2, 3, 4, 5, 6, 0r 7），所以这里使用来自 Telerik 的 RadEdior，实际上 Telerik 有 1 到 7 种字体大小，因此根据 Telerik 解决方案，我尝试使用该特定 <ol> 的第一个项目字体大小设置 <ol> 的字体大小。这就是我尝试过的 function OnClientCommandExecuting(sender, args) { let commandName = args.get_commandName(); if (commandName === "InsertOrderedList") { let doc = sender.get_document(); setTimeout(function () { let olElements = doc.getElementsByTagName("ol"); if (olElements.length > 0) { let getLastOrderList = olElements[olElements.length - 1]; let firstListOfOrderList = getLastOrderList.getElementsByTagName("li")[0]; if (firstListOfOrderList) { let fontElements = firstListOfOrderList.getElementsByTagName("font"); let firstLiFontSize = 'small'; if (fontElements.length > 0) { let firstFontTag = fontElements[0]; let fontSize = firstFontTag.getAttribute("size"); if (fontSize) { fontSize = parseInt(fontSize, 10); switch (fontSize) { case 1: firstLiFontSize = 'x-small'; break; case 2: firstLiFontSize = 'small'; break; case 3: firstLiFontSize = 'medium'; break; case 4: firstLiFontSize = 'large'; break; case 5: firstLiFontSize = 'x-large'; break; case 6: firstLiFontSize = 'xx-large'; break; case 7: firstLiFontSize = 'xxx-large'; break; default: firstLiFontSize = 'small'; } } } getLastOrderList.style.fontSize = firstLiFontSize; } } }, 0); } } 实际上上面的代码按照我的预期生成了输出，但我需要以不同的方式获取输出所以，我需要修改代码以达到我预期的输出我需要删除硬编码的 switch case 语句删除setTimeOut方法，不影响当前功能获取输出html代码而不实现如下所示的包装功能测试下面我附上了编辑器视图的屏幕截图编辑器视图截图编辑器视图的输出如下 <ol style="font-size: small;"> <li>test</li> <li>s</li> </ol>   <ol style="font-size: x-small;"> <li> sds </li> <li> f </li> <li> ff </li> </ol>   <ol style="font-size: medium;"> <li> sdssds </li> <li> d </li> <li> sd </li> </ol>   <ol style="font-size: x-large;"> <li> sd </li> <li> sd </li> <li> ds </li> </ol> 让我们清楚地看到输出，每个 <ol> 元素都采用 li 中第一个 <ol> 的字体大小，所以这个输出是完全正确的，所以与我需要在上面的 Telerik Solution 的帮助下获得输出相同提到的要求因此，如果您对此有任何想法，请查看并告诉我我从 Telerik 官方方面得到了答案，所以请使用下面的代码来解决这个问题 function OnClientCommandExecuting(editor, args) { let commandName = args.get_commandName(); if (commandName == "RealFontSize" || commandName == "FontSize") { let selElem = editor.getSelectedElement(); if (selElem.tagName == "LI" || selElem.tagName == "UL" || selElem.tagName == "OL") { selElem.style.fontSize = fontSizeIntoPixels(args.get_value()); } else selElem.style.fontSize = fontSizeIntoPixels(args.get_value()); args.set_cancel(true); } } function fontSizeIntoPixels(fsValue) { switch (fsValue) { case 1: return "10px"; break; case 2: return "13px"; break; case 3: return "16px"; break; case 4: return "18px"; break; case 5: return "24px"; break; case 6: return "32px"; break; case 7: return "48px"; break; } }

telerik html-lists font-size radeditor

回答 1 投票 0

contenteditable LI 中的光标在单击时不会转到 EOL (Chrome)

我正在使用内容可编辑列表。目前我无法解决以下 chrome 问题（至少在 FF 中工作正常）。当您单击以下行末尾后，光标为...

javascript google-chrome html-lists contenteditable

回答 1 投票 0

分页和过滤脚本即将准备就绪

@alex-r 在这方面给了我很多帮助，但我遇到了一些问题。要了解我想说的内容，请单击“类别 1”链接，现在单击“下一步”直到其隐藏，然后单击“类别 3”...

jquery pagination html-lists

回答 1 投票 0

过滤和分页

大家好，感谢您的帮助。我正在尝试实现一个简单的分页过滤器，按类别隐藏 li。例子在这里。我是这方面的新手，但在一些帮助下，主要想法正在发挥作用。唯一的

jquery pagination html-lists

回答 1 投票 0

使用 thymeleaf 循环的有序列表未连接

如果我必须含糊其辞，我很抱歉，因为我无法真正表达客户的要求。我有一个堆叠的有序列表，其中显示了父级和子级的详细信息。在父子部分之前，第一个

java html thymeleaf html-lists

回答 1 投票 0

内联块不适用于图像及其后面的列表

我需要创建一个简单的导航栏，没有搜索框，只有徽标和旁边的链接，并且我不允许使用浮动或弹性框，这是代码： .nav-标志 img{ 高度：48像素；显示：内联块；

html css html-lists vertical-alignment display

回答 1 投票 0

如何修复嵌套网格布局？

在下面的示例中您可以看到该问题。我尝试将 grid-container (ol) 的 grid-tample-colums 属性更改为 grid-template-columns: min-content 1fr 0; 。但我被困住了。奥尔{

html css flexbox css-grid html-lists

回答 1 投票 0

如何使用 CSS 中的字母为 Obsidian 中的嵌套列表动态增加列表计数器？

我正在使用 Obsidian 并尝试自定义嵌套有序列表的外观。我想要的是具有以下结构： 1. 一个。 b. 2. 一个。 b. 我已经能够获得数值增量...

css html-lists counter nested-lists obsidian

回答 1 投票 0

CSS @counter-style 类似于 toLocaleString

是否可以有一个行为类似于 number.toLocaleString() 的列表计数器样式？或者至少在数千处显示逗号？基本上显示 1,234（或理想情况下 1.234 depe...

css css-animations html-lists

回答 1 投票 0

如何指定从哪里开始列表CSS

我的 HTML 结构如下所示：第 1 项我的 HTML 结构如下所示： <ol styletype="A" start="5"> <li data-prefix="Pre" data-suffix="Suf">Item 1</li> <li data-prefix="Pre" data-suffix="Suf">Item 2</li> <li data-prefix="Pre" data-suffix="Suf">Item 3</li> </ol> start 属性是我想要开始列表的地方。我能够执行以下操作，我能够从输入到内容可编辑列表中的数字开始列表： /* Default start value */ ol { counter-reset: item; } /* Custom start values */ ol[start="2"] { counter-reset: item 0; } ol[start="3"] { counter-reset: item 1; } ol[start="4"] { counter-reset: item 2; } /* Add more as needed */ ol[start="5"] { counter-reset: item 3; } /* Decimal (1, 2, 3, ...) */ ol[styletype="1"] > li::before { content: attr(data-prefix) "." counter(item, decimal) "." attr(data-suffix); position: absolute; left: 0; white-space: nowrap; pointer-events: none; counter-increment: item; } 我可以从 1 - 5 开始一个列表，没问题，但是，我需要一种方法能够从任何数字、罗马数字、字母等开始一个列表。我希望能够从 b. 开始一个列表， z.、4.、7. 等我尝试过这个方法： ol[start] { counter-reset: item calc(attr(start, number) - 1); } 但是，无论我输入什么，它都会以 2 开始每个列表。要使用 start 和 styletype 属性从任何数字、字母或罗马数字开始有序列表，请使用以下方法： JavaScript： document.querySelectorAll('ol[start]').forEach(function(ol) { const startValue = parseInt(ol.getAttribute('start'), 10); if (!isNaN(startValue)) { ol.style.counterReset = 'item ' + (startValue - 1); } }); CSS： ol { counter-reset: item; list-style: none; position: relative; padding-left: 2em; } ol > li::before { content: attr(data-prefix) "." counter(item, var(--counter-type)) "." attr(data-suffix); counter-increment: item; position: absolute; left: 0; } ol[styletype="1"] { --counter-type: decimal; } ol[styletype="a"] { --counter-type: lower-alpha; } ol[styletype="A"] { --counter-type: upper-alpha; } ol[styletype="i"] { --counter-type: lower-roman; } ol[styletype="I"] { --counter-type: upper-roman; } 此组合允许您使用不同的样式（“1”、“a”、“A”、“i”、“I”）从任何值开始列表。

css css-selectors html-lists

回答 1 投票 0

<ol> 数字另一种颜色

测试测试将显示为：测试测试我想要数字是彩色的，文字是黑色的！我可以编辑 CSS，但我...

html css colors html-lists

回答 13 投票 0

导航栏悬停在列出的项目中的字体颜色

我在网站上有一个导航栏，我希望其背景颜色为黄色，文本为黑色。当鼠标悬停在某个项目上时，背景将为黑色，文本为黄色。我的问题是...

html css html-lists nav

回答 2 投票 0

活动下拉项目的字体颜色

我在网站上有一个导航栏，我希望其背景颜色为黄色，文本为黑色。当鼠标悬停在某个项目上时，背景将为黑色，文本为黄色。我的问题是...