我使用了一个可配置的软件,它可以在为用户输入的字段制作标题时接受HTML。
字段必须与我无法控制的特定格式匹配才能更改。
它们需要看起来像这样:
4. a. Text goes here and when it word
wraps it needs to keep the indent
with the text like so
b. This is a separate field, with its
own caption but needs the same
indentation as above
5. Another separate caption, but this
line does not have sub sections
文档的每一行都是它自己的标题,无论值如何,都需要左对齐。html需要足够简单,这样如果另一个开发人员来更改某些东西,理解正在发生的事情将不会很困难。我所得到的最接近预期的结果是使用它,但对于可能需要稍后重新配置它的人来说,这并不是很好。有没有更好的方法?
发布于 2018-08-11 04:16:51
因此,这里有一种方法,但它确实需要使用ol
的start
属性来确保数字以您希望的方式工作,前提是它将是三个单独的HTML单元。
为了进行比较,我展示了仅使用pre
元素和空格来获得类似外观的效果。请注意,您可以将pre
样式设置为使用非等宽字体,但这样就会丢失对齐方式。
#container {
width: 300px
}
#container>ol {
margin: 0.5em 0 0;
-webkit-margin-before: 0;
}
#container>ol>li>ol {
list-style: lower-alpha;
margin-left: -1.25em;
}
#container>ol.empty>li {
list-style: none;
}
#container>ol>li.no-sub {
padding-left: 1.25em;
text-indent: 0;
}
<pre>
4. a. Text goes here and when it word
wraps it needs to keep the indent
with the text like so
b. This is a separate field, with its
own caption but needs the same
indentation as above
5. Another separate caption, but this
line does not have sub sections
</pre>
<div id="container">
<ol start="4">
<li>
<ol>
<li>Text goes here and when it word wraps it needs to keep the indent with the text like so</li>
</ol>
</li>
</ol>
<ol start="4" class="empty">
<li>
<ol start="2">
<li>This is a separate field, with its own caption but needs the same indentation as above</li>
</ol>
</li>
</ol>
<ol start="5">
<li class="no-sub">Another separate caption, but this line does not have sub sections</li>
</ol>
</div>
https://stackoverflow.com/questions/51792966
复制相似问题