如何使用有序列表將行號添加到文本區域？

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 對齊。 一旦我弄清楚了這一點，我就可以使用我曾經編寫的一些代碼來計算出 rest，以便在每條新消息的底部進行聊天 go。

我還希望能夠保持為單個行號的文本着色的能力，這樣就排除了另一個文本區域，而且我也不想使用 jQuery 或任何其他插件。

這個鏈接對我沒有幫助，當我查看文本區域的 CSS 和有序列表，然后嘗試從那里使它們相同時，它不起作用。 https://www.w3schools.com/cssref/css_default_values.asp

問題：有沒有辦法將 textarea 的 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>