我正在嘗試獲取自定義的有序列表來處理段落和其他容器，但我無法使列表的行為與默認值相同。具體來說，我希望有一個自定義列表和分段內容，它們與枚舉顯示在同一行。另外，我正在尋找一種更改列表而不是段落的解決方案。該段落只是我不想更改的一些生成內容的示例。.custom { list-style-type: none; counter-reset: elementcounter;}.custom li:before { content: counter(elementcounter) ". "; counter-increment: elementcounter;}.solution { list-style-type: none; counter-reset: elementcounter;}.solution li>p { display: inline-block;}.solution li:before { content: counter(elementcounter) ". "; counter-increment: elementcounter;}<ol> <li><p>Places nicely on the same line.</p></li> <li><p>Places nicely on the same line.</p> <p>Places nicely on the same line.</p></li></ol><!-- Original problem<ol class="custom"> <li><p>Places poorly on the second line.</p></li> <li><p>Places poorly on the second line.</p> <p>Places nicely on the second line.</p></li></ol>--><ol class="solution"> <li><p>Places poorly on the second line.</p></li> <li><p>Places poorly on the second line.</p> <p>Places poorly on the same line.</p></li></ol>
1 回答
30秒到達戰場
TA貢獻1828條經驗 獲得超6個贊
您可以添加inline-block到p- 像這樣：
.custom li > p {
? display: inline-block;
? margin: 2px; /* you can also adjust your margins/padding if you wish */
}
更新
根據評論（和更新的問題），如果您有多個段落，那么<li>您可以為列表中的第一個段落和列表中的p其余段落添加不同的樣式。p大致如下：
.custom li > p {
? margin: 2px;
}
.custom li > p + p {
? display: block;?
? margin: 0 1.1em;
? list-style-type: none;
}
.custom li > p:first-of-type {
? display: inline-block;
}
請參閱下面的演示代碼..
根據評論更新了演示代碼
.custom {
? list-style-type: none;
? counter-reset: elementcounter;
}
.custom li:before {
? content: counter(elementcounter) ". ";
? counter-increment: elementcounter;
}
.custom li > p {
? margin: 2px;
}
.custom li > p + p {
? display: block;?
? margin: 0 1.1em;
? list-style-type: none;
}
.custom li > p:first-of-type {
? display: inline-block;
}
<ol>
? <li>
? ? <p>Places nicely on the same line.</p>
? </li>
? <li>
? ? <p>Places nicely on the same line.</p>
? </li>
</ol>
<ol class="custom">
? <li><p>Places poorly on the second line.</p></li>
? <li><p>Places poorly on the second line.</p> <p>Places poorly on the same line.</p></li>
? <li><p>Places poorly on the second line.</p></li>
? <li><p>Places poorly on the second line.</p> <p>Places poorly on the same line.</p></li>
</ol>
- 1 回答
- 0 關注
- 169 瀏覽
添加回答
舉報
0/150
提交
取消