个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在编写我正在开发的在线类(class)的内容，需要包括大学指定的类(class)目标。每周，我都会有一个页面列出类(class)目标。目标是使用 OL 和 CSS 列出的，以创建 UnitNum.1、UnitNum.2 等形式的列表。我能够根据 Can ordered list produce result that looks like 1.1, 1.2, 1.3 (instead of just 1, 2, 3, ...) with css? 上的建议进行工作。 .
这是我页面的一部分:
<html>
<head>
<title></title>
<style type="text/css">
.dottedlist {
counter-reset: dottedlistcnt;
}
.dottedlist li {
list-style-type: none;
}
.dottedlist li::before {
counter-increment: dottedlistcnt;
content: "1." counter(dottedlistcnt) " ";
}
.dottedlist li {
list-style-position: outside;
}
</style>
</head>
<body>
<ol class="dottedlist">
<li>Identify the major constraints that impact Project Management: scope, time and cost. </li>
<li>Differentiate between IT projects and other kinds of projects: skills; turnover rates; uniqueness and complexity; visualization; requirements gathering; changing requirements; technology changes; software testing; and training.</li>
<li>Elaborate essential functions of the Project Manager: manage project scope; manage human resources; manage communications; manage schedule; manage quality; and manage costs. </li>
<li>Discuss the influence of organizational structure on Project Management effectiveness. </li>
</ol>
</body>
</html>
渲染中的问题是文本在元素 1.2 和 1.3 周围环绕并且在编号下方，而我希望它与(每行)上方的文本对齐。
另外，有谁知道我是否可以在 .dottedlist li::before 中参数化数字 1，以便在处理其他单元时在其他页面上可以简单地添加它？
最佳答案
这是不可能的，因为 :before被放置在li 的内部 ，不在外面。
考虑 JavaScript。这是一个 jQuery基于演示。您可以复制'n'粘贴'并运行它。
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 4503825</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('ol.dottedlist').each(function(i, ol) {
$ol = $(ol);
$ol.children('li').each(function(i, li) {
$li = $(li);
var level = '1.' + ($li.index() + 1);
$li.prepend('<span>' + level + '</span>');
});
});
});
</script>
<style>
ol.dottedlist {
list-style-type: none;
}
ol.dottedlist li span {
margin: 0 5px 0 -25px;
}
</style>
</head>
<body>
<ol class="dottedlist">
<li>Identify the major constraints that impact Project Management: scope, time and cost. </li>
<li>Differentiate between IT projects and other kinds of projects: skills; turnover rates; uniqueness and complexity; visualization; requirements gathering; changing requirements; technology changes; software testing; and training.</li>
<li>Elaborate essential functions of the Project Manager: manage project scope; manage human resources; manage communications; manage schedule; manage quality; and manage costs. </li>
<li>Discuss the influence of organizational structure on Project Management effectiveness. </li>
</ol>
</body>
</html>
额外的好处:它也适用于旧版浏览器(IE6/7/等)。
关于html - OL 列表的文本换行使用 CSS 样式化为点列表，例如1.1、1.2、1.3 等，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4503825/
25
4
0
出于好奇，我尝试了一些原型(prototype)制作，但似乎只允许在第一个位置使用子例程的原型(prototype) &。 当我写作时 sub test (&$$) { do_somethin
我需要开发一个类似于 Android Play 商店应用程序或类似 this app 的应用程序.我阅读了很多教程，发现几乎每个教程都有与 this one 类似的例子。 . 我已经开始使用我的应用程
考虑一个表示“事件之间的时间”的列: (5, 40, 3, 6, 0, 9, 0, 4, 5, 18, 2, 4, 3, 2) 我想将这些分组到 30 个桶中，但桶会重置。期望的结果: (0, 1,
我是一名优秀的程序员,十分优秀！