Question

我正在进行前端项目，并且需要显示一些标题的有序列表。但我的客户需要在<li>中显示覆盖罗马数字样式和标题的下划线这是该页面的html代码：

<ol type="I">
  <li><span>Non-Canadian Investors</span>// this is my heading that needs to be underline with roman number also
    <p>Cce or information to anyone </p>
  </li>
</ol>

我需要在li块中显示一些文字，这就是为什么我使用<p>标记和<span>标记用于下划线的目的

Answer 1

如果你想在文字下划线，那么只需添加文字装饰：下划线;统治到.custom-counter li 您可以像这样实现所需的结果：

<ol class="custom-counter">
  <li><span>Non-Canadian Investors</span>// this is my heading that needs to be underline with roman number also
    <p>Cce or information to anyone </p>
  </li>
</ol>

static ManualResetEvent resetEventsGet(string key)
{
    lock(resetEvents)
    {
        ManualResetEvent result;

        // lookup the key
        if(!resetEvents.TryGetValue(key, out result))
            // if it doesn't exists, create a new one.
            resetEvents.Add(key, result = new ManualResetEvent(false));

        return result;
    }
}

Answer 2

这样的事情？

＆＃13;

ol{
  list-style-position: inside;
}
li{
  position: relative;
}
.underlined{
  display: inline-block;
  position: absolute;
  left: 0px;
  border-bottom: 1px solid;
  margin: 0px;
}
.underlined span{
  padding-left: 25px;
}
.text{
  padding-left: 25px;
}

＆＃13;

<ol type="I">
    <li>
        <p class="underlined"><span>some underlined text</span></p>
        <p class="text">some text</p>
    </li>
    <li>
        <p class="underlined"><span>some underlined text</span></p>
        <p class="text">some text</p>
    </li>
    <li>
        <p class="underlined"><span>some underlined text</span></p>
        <p class="text">some text</p>
    </li>
</ol>

＆＃13;

Answer 3

你可以使用

.list {
  counter-reset: my-badass-counter;
}
.list dt{
  border-bottom: 1px solid red;
}
.list dt:before {
  content: counter(my-badass-counter, lower-roman);
  counter-increment: my-badass-counter;
    padding-right: 10px;
}

<dl class="list">

	<dt>list head 1</dt>
	<dd>list data 1</dd>
	
	<dt>list head 2</dt>
	<dd>list data 2</dd>
	
	<dt>list head 3</dt>
	<dd>list data 3</dd>

</dl>

Answer 4

一个肮脏的技巧是使用CSS计数器，然后绝对定位计数器（放置在unicode的::before`` pseudo-element). To force the underline to extend towards the text, you will have to insert an arbitrary amount of whitespace, in this case I use the em space, represented as \ 2003`中。

此技巧在支持多行内容的意义上有效，请参阅下面的概念验证示例。此外，我选择使用不同的颜色作为计数器文本，以便显示视觉效果：

＆＃13;

ol {
  counter-reset: listCounter;
  list-style: none;
}
ol li {
  padding-left: 2rem; /* Some arbitrary spacing */
  position: relative;
}
ol li::before {
  color: #ff0000;
  counter-increment: listCounter;
  content: counter(listCounter, upper-roman) "\2003\2003\2003"; 
  display: inline-block;
  text-decoration: underline;
  position: absolute;
  left: 0;
  max-width: 2rem;    /* Must match the left padding above */
  overflow: hidden;   /* Hide overflowing underline */
}
ol li span {
  text-decoration: underline;
}

＆＃13;

<ol type="I">
  <li><span>Non-Canadian Investors</span>
    <p>Cce or information to anyone </p>
  </li>
  <li><span>This is a very long title This is a very long title This is a very long title This is a very long title This is a very long title This is a very long title</span>
    <p>Cce or information to anyone </p>
  </li>
</ol>

＆＃13;

如何在有序的HTML列表中为罗马数字加下划线

4 个答案: