- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试创建一个响应式分类键,包括基于嵌套列表和用于创建目录的代码的点引导符。它几乎完成了,但是点领导者有时会在不需要时跨越两行。当“页码”或“种类”太长而无法与初始文本放在同一行时,它们应该只跨越第二行,迫使它到下面一行。
可以在这里看到我想要的示例: 4a 是我想要的样子,4b 不是我想要的样子
我不确定是什么原因导致这种情况发生,因为它并非一直发生。
#key {
overflow: hidden;
}
ol {
list-style-position: outside;
}
ol.list {
padding-left: 25px;
margin-top: -21.8px;
}
.list li {
position: relative;
list-style-position: outside;
list-style-type: lower-alpha;
padding-left: 5px;
text-indent: -10px;
}
.list .list-item {
margin: 0 0px 15px;
}
.list .list-item:last-child {
margin: 0 0 40px;
}
.list .list-item::before {
content: ".......................................................................................";
text-indent: 5px;
letter-spacing: 6px;
position: absolute;
left: 0px;
bottom: 0px;
z-index: -10;
}
.list .list-item .text::after {
content: "....................................................................................";
text-indent: 5px;
letter-spacing: 6px;
position: absolute;
left: 0px;
z-index: -10;
}
.list .list-item span {
display: inline;
background-color: #fff;
padding-right: 1px;
padding-left: 10px;
}
.list .list-item .number {
float: right;
font-weight: bold;
color: #198e9d;
background-color: #fff;
padding-left: 11px;
}
/* Clearfix */
.list .list-item::after {
content: "";
display: block;
clear: both;
}
/* --figcaption-- */
.wp-caption-text {
float:right;
font-size: 0.9em;
}
/* image info */
.info {
text-align:right;
color:grey;
margin-top:-1em;
font-size:0.899em;
background-color:#fff
}
<div id="key">
<ol>
<li>
<ol class="list">
<li class="list-item"><span class="text">Bill short, less than 15% of lower jaw – fork length (Fig. 5a);anus located well anterior of first anal fin by a distance greater than length of first anal-fin base (Fig. 6a)</span><span class="number"><em>Tetrapturus angustirostris</em> (shortbill spearfish)</span></li>
<li class="list-item"><span class="text">Bill moderately long, more than 18% of lower jaw – fork length (Fig. 5b); anus slightly anterior of first anal fin by a distance of less than length of first anal-fin base (Fig. 6b)</span><span class="number"><em>Kajikia audax</em> (striped marlin)</span></li>
</ol>
</li>
<li>
<ol class="list">
<li class="list-item"><span class="text">Pectoral fins curved in shape, resembling a half sickle (Fig. 7a), rigid unable to be folded back against sides of body (more flexible in individuals <15 kg); dorsal-fin tip bluntly rounded (Fig. 8a); branchiostegal frill long, extending to near level with rear edge of operculum (Fig. 9a); second dorsal-fin anterior to second anal-fin (Fig. 10a)</span><span class="number"><em>Istiompax indica</em> (black marlin)</span></li>
<li class="list-item"><span class="text">Pectoral fins strap like (Fig. 7b) flexible, able to be folded back against sides of body; dorsal fin pointed at tip (Fig. 8b); branchiostegal frill short, extending to well forward of rear edge of operculum (Fig. 9b); second dorsal-fin posterior to second anal-fin (Fig. 10b)</span>
<span class="number"><em>Makaira nigricans</em> (blue marlin)</span></li>
</ol>
</li>
</ol>
</div>
最佳答案
我无法复制您的问题,如果可以,请粘贴示例链接。但是,应保留使用负边距作为最后的手段,我相信这可能会导致问题,具体取决于浏览器。试试这个。
#key {
overflow: hidden;
}
ol {
list-style-position: outside;
}
ol.list {
padding-left: 25px;
margin-bottom: 20px;
}
.list li {
position: relative;
list-style-position: outside;
list-style-type: lower-alpha;
padding-left: 5px;
text-indent: -10px;
}
.list .list-item {
margin: 0 0px 15px;
}
.list .list-item:last-child {
margin: 0;
}
.list .list-item::before {
content: ".......................................................................................";
text-indent: 5px;
letter-spacing: 6px;
position: absolute;
left: 0px;
bottom: 0px;
z-index: -10;
}
.list .list-item .text::after {
content: "....................................................................................";
text-indent: 5px;
letter-spacing: 6px;
position: absolute;
left: 0px;
z-index: -10;
}
.list .list-item span {
display: inline;
background-color: #fff;
padding-right: 1px;
padding-left: 10px;
}
.list .list-item .number {
float: right;
font-weight: bold;
color: #198e9d;
background-color: #fff;
padding-left: 11px;
}
/* Clearfix */
.list .list-item::after {
content: "";
display: block;
clear: both;
}
/* --figcaption-- */
.wp-caption-text {
float:right;
font-size: 0.9em;
}
/* image info */
.info {
text-align:right;
color:grey;
margin-top:-1em;
font-size:0.899em;
background-color:#fff
}
关于html - 点领导者跨越过多的线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49001452/
我有以下 StackedXYAreaChart: 如何让我的绘图从左到右一直延伸,以便图表和绘图的边界之间没有空白?谢谢! 最佳答案 createStackedAreaChart()方法创建一个具有
当您将一个从 MarshalByRefObject 继承的对象传递给另一个 AppDomain 时,创建它的 AppDomain 所诱导的 GC.Collect() 不会收集该对象,前提是该对象在 G
我有一个使用 DefaultTableModel 的 JTable,它会生成如下表: 但是我很好奇是否有一种好方法可以在交叉的单元格中创建箭头,如下例所示...... 这对我来说似乎很难。有什么方法可
我在一个 div 中有 3 个 span。 Title Someinfomation Toright 为了使 c 类垂直对齐,我必须使用 margin-top 来修复它然而,对于 IE
首先,我完全意识到这个问题已经被问过很多次了,但是我发现的每种方法似乎都已经过时了和/或所引用的链接已不复存在。 所以我想知道是否有一种方法可以使 JTable 中的特定行跨越所有列,就像一个忽略该列
我需要帮助来按照下图获取 Bootstrap 布局。我无法弄清楚如何让黄色条与 Bootstrap 容器的整个宽度一起显示,而不影响列在移动 View 上的堆叠方式(第二张图片)。 所以我不需要在移动
我有一个包含以下数据的集合 _id name type 1 Banana Fruit 2 Tomato Vegetable 3 Carrot Vegetable 4 Tom
我知道有很多这类问题,但我没有看到一个与我的标准足够相似的问题。所以我想请你帮忙。我拥有的字段只是时间类型的开始和结束。我不能在其中涉及任何具体日期。如果时间范围不超过一天的午夜,我将直接比较两个元组
我有一个包含许多数字列的数据框,第一列需要针对第二列进行回归,然后存储 Rsqr 值,然后第一列针对第三列,然后存储 Rsqr 值...等等.这样做直到第 n 列回归到第 1 列。 我希望结果是一个数
标题可能很隐晦,但这是我的问题。 我有一张一天的事件表(行程表)。每个条目(例如参观博物馆)都有 slot_start 和 slot_end 时间列。这是 24 小时格式,例如 13:00:00 -
这对我来说是一个大问题,我正在努力解决不同设备之间的缩放问题。如果我只有一个回显的乘数,那就太好了,除非可以使用 javascript 变量来代替宽度、高度、字体大小等值... 例如,stackexc
不必是表格也可以是 div。 我的图片有一些透明部分需要混合。上半部分需要与下半部分不同的背景颜色混合。 所以在我看来,表格有 2 行,其中一行有一种背景颜色,另一行有另一种背景颜色,但图像跨越两行。
我试图以这样一种方式将 span 与 div 一起使用,即最后一个 span 占据 div 的剩余宽度 dddd: ssss .data{width:100%;display:bl
我在跨共享库边界使用 libstdc++ 的 std::any 实现和 mingw 时偶然发现了一个问题。它会产生一个 std::bad_any_cast 显然不应该(我相信)。 我使用 mingw-
我正在从一张 1bpp 索引图像剪切并粘贴到一张新图像。 一切正常,直到起始像素是 8 的除数。在下面的代码中,步幅等于相对于矩形宽度的值,直到我达到字节边界。那么步幅等于整个页面的宽度。 var c
我目前有以下 SwiftUI View : HStack { ... VStack { TextField { ... } SecureField { ... } Bu
我想构建一个标准的 JTable,但所有行都分布在一个特定的列上。因此该列必须仅包含一个以 JTextPane 作为其渲染器的单元格。您知道任何简单的方法吗? 注意:不需要第三方软件。 谢谢。 最佳答
这个问题在这里已经有了答案: 关闭 12 年前。 Possible Duplicate: Auto-size dynamic text to fill fixed size container. 假
我有一个左浮动的 div 和它跨越左浮动的 div 之后的 div。 看这里http://www.kienitz.it/kienitz_cms/referenzen/ . 我想要这样:http://w
我在水平导航栏上有一个下 zipper 接,如下所示:
我是一名优秀的程序员,十分优秀!