如何使用有序列表将行号添加到文本区域？

Question

我有一个文本区域，我希望由有序列表组成的行号位于它的左侧，并使它们与文本区域的滚动和 CSS 相对应。

这里是 HTML 代码：

#objtext{
  position:absolute;
  top:0;
  left:0;
  width:30%;
  height:70%;
  background-color:#eeeeee44;
}

#linenumbersdiv{
  color:brown;
  font-family: "Lucida Grande",Verdana;
  position: absolute;
  top:0;
  left:0;
  width:40px;
  height:70%;
  background-color:lime;
  margin-left:-10px;
  padding:0px;
  overflow-y:scroll;
  margin-top:0;
  margin-bottom:0;
  padding-left:0;
  
}


#linenumberslist{
  font-size:10px;
  display:block;
  margin-top:0;
  margin-bottom:0;
  margin-left:0;
  margin-right:0;
}

<div id="linenumbersdiv">
      <ol id="linenumberslist">
        <li id="theone">this could be individually colored!</li>
        <li>ahh</li>
        <li>AHHHH</li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ol>
    </div>
    <textarea id="objtext"></textarea>

我想不出 CSS 来使有序列表元素与文本区域的默认 CSS 对齐。一旦我弄明白了这一点，我可能可以使用我曾经编写的一些代码来弄清楚其余部分，这些代码可以让聊天在每条新消息的底部出现。

我还希望能够保持为单个行号的文本着色的能力，这样就排除了另一个文本区域，而且我也不想使用 jQuery 或任何其他插件.

This link 对我没有帮助，当我查看文本区域的 CSS 和有序列表，然后尝试从那里使它们相同时，它不起作用。 https://www.w3schools.com/cssref/css_default_values.asp

问题：有没有办法将文本区域的 CSS 复制到有序列表中，使行对齐？

Answer 1

将 textarea 和 ol 的 margin 和 padding 都设置为 0 很重要。因为 textarea 不继承字体属性, 您需要将它们设置为 inherit.

.container{
        position: relative; 
        margin: 20px;
        font-family:"Lucida Console", Monaco, monospace;
        font-size: 100%;
        line-height: 120%;
    }
    .container .list {
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 25px;
        background-color: green;    
    }
    .container .list ol {
        margin: 0;
        padding: 0;
        list-style-position: inside;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }
    .container .list ol li{
        padding-left:5px;   
    }
    .container .textarea {
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
    }
    .container .textarea textarea {     
        width:300px;
        height: 200px;
        margin: 0;
        padding: 0 0 0 30px;
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
        border: 1px solid black;
        
    }

<div class="container">
    <div class="list">
        <ol>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
    <div class="textarea">
        <textarea></textarea>
    </div>
</div>

如何使用有序列表将行号添加到文本区域？

How can I add line numbers to a textarea using an ordered list?

html

javascript

css

textarea

html-lists