我正在尝试创建一个响应式分类键,包括基于嵌套列表和用于创建目录的代码的点引导符。它几乎完成了,但是点领导者有时会在不需要时跨越两行。当“页码”或“种类”太长而无法与初始文本放在同一行时,它们应该只跨越第二行,迫使它到下面一行。
可以在这里看到我想要的示例: 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/