用于HTML中的有序和无序列表及其列表项，以及应用于它们的任何列表样式。
在firefox中显示，但在IE中没有（其实我的是IE6） 李{ 列表样式类型：光盘； } 在firefox中显示，但在IE中不显示（其实我的是IE6） <style type="text/css"> li { list-style-type: disc; } </style> <div style="margin: 2px auto 15px; padding: 5px 0px; width: 480px; text-align: center;"> <ul style="margin: 0; padding: 0; text-align: left; list-style-position: outside; overflow: visible;"> <li><em>test.</em> 111</li> <li><em>test.</em> 2</li> </ul> </div> 可以看这里：链接文字 编辑 所有要求： 1.保持父div宽度固定。 2.必须使 <ul> text-align:left; 3.显示项目符号 尝试弄乱 ul 上的边距/填充并可能为 lis 提供布局？ ul { margin:0 0 0 10px; padding:0 0 0 10px; } ul li { zoom:1; } 我忘记了 IE 关心哪一个，但它需要足够的空间来显示它们。 列表的左边缘始终位于文本处，而不是项目符号点处。换句话说，项目符号点位于列表的边界框之外，这使得它们在 IE 中由于某种原因消失。 向列表中添加一些 left-padding（至少 20 像素即可）。 我认为你还想向页面添加文档类型 - 在你的示例页面上，列表应该居中对齐，但它不适合我（在 IE8 中），因为 IE 处于怪异模式。 因为 CSS 宽度属性。 我建议您将宽度属性设置为 li 标签而不是 ul 编辑 list-style-position: outside; 在 Firefox 上也会出现同样的问题 您将不得不找到另一种方法来设置列表样式，但是如果您坚持list-style-position: outside;，您可以使用javascript在合适的位置设置宽度属性。 我知道这是旧风格，但这应该有用 <li type="disc">... </li> 它可能会工作.. ie 有很多 css 问题.. 问题将被修复..
我想将 中的数字和文本左对齐。这就是我想要实现的目标： 目前，每个 都包含一个 ，但这可能会改变。到目前为止我尝试过... 我想将 <ol> 中的数字和文本左对齐。这就是我想要实现的目标： 目前，每个 <li> 都包含一个 <a>，但这可能会改变。到目前为止，我尝试在 <a> 上添加左侧填充，然后添加文本缩进。 这是我现在的代码。 HTML： <ol class="dinosaurs"> <li><a>Dinosaur</a></li> <li><a>Tyrannosaurus</a></li> <li><a>Camptosaurus</a></li> </ol> CSS： .dinosaurs{ list-style-position: inside; } 注意：我正在 Windows 7 上的 Chrome 23 中查看网页。 这似乎有效： .dinosaurs { counter-reset: item } .dinosaurs li { display: block } .dinosaurs li:before { content: counter(item) ". "; counter-increment: item; width: 2em; display: inline-block; } <ol class="dinosaurs"> <li>Brontosaurus</li> <li>Triceratops</li> <li>Tyrannosaurus</li> <li>Velociraptor</li> <li>Stegosaurus</li> <li>Brachiosaurus</li> <li>Nigersaurus</li> <li>Giganotosaurus</li> <li>Archaeopteryx</li> <li>Diplodocus</li> </ol> 您可以像这样定位列表元素： .dinosaurs { list-style-position: inside; } .dinosaurs li{ position: relative; } .dinosaurs li a { position: absolute; left: 30px; } 这会产生http://jsfiddle.net/wBjud/2/ 现有的答案都不适合我，但通过组合和构建它们，我发现了类似的方法，包括多行条目，不需要列表项中的任何标签： ol { counter-reset: item; } li { display: block; margin-left: 1.7em; } li:before { content: counter(item) ". "; counter-increment: item; position: absolute; margin-left: -1.7em; } 看起来像这样：https://jsfiddle.net/b3dayLzo/ 我认为将 li:before 放在 li 的左边距即可。 您可能想要不同的margin-left。 ol 上没有类，因为在我的例子中，它出现在容器的样式中。 尝试将 padding-left: 0; 添加到您的样式中，并根据需要将 list-style-position: 更改为 outside。 您可以通过使用定位、填充和边距来伪造它。 jsFiddle 示例 .dinosaurs { list-style-position: inside; position:relative; margin-left: -20px; } a { position:absolute; left:70px; } 如果您使用 list-style-position: inside;，则数字将放置在文本块内。要调整数字的位置并保持文本的标识，请使用此 css。 ol { list-style: none; counter-reset: step-counter; padding-inline-start: 25px; } ol > li { counter-increment: step-counter; } ol > li:before { content: counter(step-counter)"."; display: inline-block; position: absolute; margin-left: -25px; } 让你的子弹也保持在左边 ul { list-style: none; padding-inline-start: 25px; } ul > li:before { content: '\25cf'; position: absolute; margin-left: -25px; }
如何使导航菜单中的 在单击后改变颜色，并在我网站的同一页面上保持该颜色，最好不使用 JavaScript 或 jQu... 如何使导航菜单中的 <li> 在单击后改变颜色，并在我网站的同一页面上保持该颜色，最好不使用 JavaScript 或 jQuery？谢谢。 示例： https://smartsoftcode.com/preview/kenox/demo/index-v2.html 顶部导航菜单中的每个项目在单击时都会更改颜色，并保持该颜色，直到单击另一个列表项。 试试这个active方法： <!DOCTYPE html> <html> <head> <style> .active:active { color: red; } .focus:focus { color: red; } :target { color: red; } </style> <body> <a href='#target1' id='target1' class='target'>Target 1</a> <a href='#target2' id='target2' class='target'>Target 2</a> <a href='#target3' id='target3' class='target'>Target 3</a> </body> </html>
我的网络应用程序框架为无序列表中的每个字段呈现表单错误 紧随无效字段。我的问题是我无法设计样式，以便... 我的网络应用程序框架为无序列表中的每个字段呈现表单错误<UL>，紧随无效字段。我的问题是我无法设置样式以便错误与表单字段列在同一行。相反，在 <UL> 之前呈现换行符。 这是我尝试设置样式的 html，显示服务器确定的无效字段： <p> <label for="id_email">Email</label> <input id="id_email" type="text" name="email" /> <span class='field_required'> *</span> <ul class="errorlist"><li>This field is required.</li></ul> </p> 如何防止为每个必填字段显示星号的“field_required”与表单未验证（在服务器上）时呈现的“errorlist”之间出现换行？ 目前我正在造型： span 更新： 感谢大家迄今为止的帮助！ 我可以控制 HTML 输出，尽管我的框架（django）默认以 span.field_required {color:red; display:inline;} ul.errorlist {list-style-type: none; display:inline;} ul.errorlist li {display: inline; color:red; } 的形式给出错误。根据很好的建议，我尝试用自己的风格 <UL> 和 <p> 包装列表。将列表包装在 <span> 中现在可以在 Firefox 3.0 中使用，但不能在 Safari 4.0 中使用。 当我在 Safari 中检查该元素时，该段落似乎在 <span> 之前立即关闭，尽管这不是 HTML 源代码的外观。 我是否偶然发现了跨浏览器错误？ （不。见下文！） 最终解决方案：感谢您的所有帮助。这是我最终解决问题的方法： 将标签字段错误组合周围的 <UL> 标签替换为带有 <p> 样式的 <div>。感谢 jennyfofenny 指出 W3C 规范禁止在 clear:both; 内出现块（在我的例子中是列表） - 因此赢得了答案。这就是为什么 Safari 会自动关闭我在列表之前的段落，尽管 Firefox 让它滑动。 然后我这样设计我的列表： <p> 是否也将 p 标签设置为 display: inline 呢？这是一个选择吗？ ul.errorlist {list-style-type: none; display:inline; margin-left: 0; padding-left: 0;} ul.errorlist li {display: inline; color:red; font-size: 0.8em; margin-left: 0px; padding-left: 10px;} 至于 p 标签问题...我不相信 W3C 规范允许在段落标签内使用无序列表标签。来自 http://www.w3.org/TR/html401/struct/text.html#h-9.3.1： P元素代表一个段落。它不能包含块级元素（包括 P 本身）。 您只想消除段落和列表之间的空格吗？ 如果是这样，请使用： p { display: inline; } 然后添加“margin-bottom:0;”到段落（或者只是将错误列表放在 p 标签内）。 如果您还希望列表显示在一行上，请按照其他人的建议使用 display:inline 。 ul.errorlist { margin-top:0; } 最后一点： ul.errorlist { 显示方式：内嵌； 列表样式类型：无； } 如果您无法更改 html，那么您的问题是 ul 周围没有可以设置样式的元素。 如果您使用 javascript，如果您可以知道何时发生错误，那么您可以在 ul.errorlist { display: inline; margin: 0; } 周围添加 <p> 或 <span>，然后设置样式，使其内联。 此链接显示，大约向下 1/2，为此目的使用 <ul> 标签。 http://www.alistapart.com/articles/taminglists/ 如果你只是想在 css 中做到这一点，我相信你会不走运。您可能会问他们是否可以在错误列表周围放置一个封闭标签，以便您可以对其进行样式设置。
我在Reactjs中使用dangerouslySetInnerHtml为博客页面显示一些内容，但没有显示项目符号点
我在Reactjs中使用dangerouslySetInnerHtml为博客页面显示一些内容，但没有显示要点，但是相同的代码和页面正在另一个项目中使用，那就是
我有 html 之类的东西... 我有类似 html 的东西 <ul id="sidemenu" class="wraplist wrapper-menu"> <li class="auto" ng-class='{"active": active == 1 }' ng-click="makeActive(1)"> <span class="arrow material-icons">arrow_down</span> <li> <li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)"> <span class="arrow material-icons">arrow_down</span> <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)"> <span class="arrow material-icons">{{ keyboardArrow1 }}</span> <li> <li class="auto" ng-class='{"active": active == 2 }' ng-click="makeActive(2)"> <span class="arrow material-icons">{{ keyboardArrow2 }}</span> <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 来过滤 html 列表。 默认情况下，所有列表项都是隐藏的，但如果用户输入正确的关键字，则会显示。 目前搜索仅返回项目...
我正在尝试将自定义图像设置为项目符号。当我使用背景或背景图像标签时，它可以工作，但无法与列表类别正确对齐。当我使用列表样式图像时，它不是
我有一个在线会员目录，我们已开放该目录供 Google 抓取。所有会员列表均以组织名称作为搜索结果中的搜索结果标题。我正在努力上来...
实际上，即使 listItem01 字体大小更大（1,, 2, 3, 4, 5, 6, 0r 7），收到输出后 标签字体大小也会变为 1，所以 h. .. 实际上 <ol> 标签字体大小在收到输出后变为 1，即使 <li><font>listItem01</font></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> <p> </p> <ol style="font-size: x-small;"> <li> <font size="1">sds</font> </li> <li> <font size="1">f</font> </li> <li> <font size="1">ff</font> </li> </ol> <p> <font size="1"> </font> </p> <ol style="font-size: medium;"> <li> <font size="3">sdssds</font> </li> <li> <font size="3">d</font> </li> <li> <font size="3">sd</font> </li> </ol> <p> <font size="3"> </font> </p> <ol style="font-size: x-large;"> <li> <font size="5">sd</font> </li> <li> <font size="5">sd</font> </li> <li> <font size="5">ds</font> </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; } }
contenteditable LI 中的光标在单击时不会转到 EOL (Chrome)
我正在使用内容可编辑列表。目前我无法解决以下 chrome 问题（至少在 FF 中工作正常）。 当您单击以下行末尾后，光标为...
@alex-r 在这方面给了我很多帮助，但我遇到了一些问题。要了解我想说的内容，请单击“类别 1”链接，现在单击“下一步”直到其隐藏，然后单击“类别 3”...
大家好，感谢您的帮助。我正在尝试实现一个简单的分页过滤器，按类别隐藏 li。例子在这里。我是这方面的新手，但在一些帮助下，主要想法正在发挥作用。唯一的
如果我必须含糊其辞，我很抱歉，因为我无法真正表达客户的要求。 我有一个堆叠的有序列表，其中显示了父级和子级的详细信息。在父子部分之前，第一个
我需要创建一个简单的导航栏，没有搜索框，只有徽标和旁边的链接，并且我不允许使用浮动或弹性框，这是代码： .nav-标志 img{ 高度：48像素； 显示：内联块；
在下面的示例中您可以看到该问题。我尝试将 grid-container (ol) 的 grid-tample-colums 属性更改为 grid-template-columns: min-content 1fr 0; 。但我被困住了。 奥尔{
如何使用 CSS 中的字母为 Obsidian 中的嵌套列表动态增加列表计数器？
我正在使用 Obsidian 并尝试自定义嵌套有序列表的外观。我想要的是具有以下结构： 1. 一个。 b. 2. 一个。 b. 我已经能够获得数值增量...
CSS @counter-style 类似于 toLocaleString
是否可以有一个行为类似于 number.toLocaleString() 的列表计数器样式？或者至少在数千处显示逗号？ 基本上显示 1,234（或理想情况下 1.234 depe...
我的 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，但我...