带行号显示的文本输入框用html代码展示
时间: 2023-06-27 21:05:18 浏览: 113
可以使用`<pre>`标签来展示带行号的文本输入框,同时可以使用CSS样式来美化它。以下是一个示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>带行号的文本输入框</title>
<style>
pre {
background-color: #f5f5f5;
border: 1px solid #ddd;
padding: 10px;
white-space: pre-wrap;
font-family: 'Courier New', monospace;
line-height: 1.6;
tab-size: 4;
}
pre code {
display: block;
}
pre code:before {
content: counter(line-number);
counter-increment: line-number;
margin-right: 10px;
color: #999;
font-size: 14px;
font-family: 'Courier New', monospace;
text-align: right;
display: inline-block;
width: 20px;
}
</style>
</head>
<body>
<pre><code>
1. 第一行代码
2. 第二行代码
3. 第三行代码
4. 第四行代码
</code></pre>
</body>
</html>
```
效果如下:
![带行号的文本输入框](https://i.imgur.com/Q6bLlIr.png)
阅读全文