如何为多行列表项每行添加虚线下划线并在Express项目中实现

1. 修复列表项换行对齐及列表居中 #

当前代码存在两个核心问题：列表项文本换行后无法对齐虚线下划线起始位置，且列表未在页面居中。以下是修正后的代码：

修正后的CSS #

body {
  background-color: #f5f5f5;
  margin: 0;
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center; /* 实现页面内容整体居中 */
}

h4 {
  color: #cd0000;
  font-size: 42px;
  letter-spacing: -2px;
  width: 800px; /* 与列表宽度保持一致 */
  margin: 0 0 20px 0;
}

.list-container {
  position: relative;
  width: 800px; /* 自定义合适的列表宽度 */
}

.lines {
  border-left: 1px solid #ffaa9f;
  border-right: 1px solid #ffaa9f;
  width: 2px;
  position: absolute;
  left: 20px; /* 与文本缩进位置对应 */
  top: 0;
  bottom: 0; /* 线条高度随列表内容自动延伸 */
}

.list {
  color: #555;
  font-size: 22px;
  padding: 0;
  width: 100%;
  font-family: courier, monospace;
  border: 1px solid #dedede;
  background-color: white;
}

.list li {
  list-style: none;
  border-bottom: 1px dotted #ccc;
  padding: 10px 10px 10px 45px; /* 用padding-left替代text-indent，确保换行后对齐 */
  text-transform: capitalize;
  margin: 0;
}

.list li:hover {
  background-color: #f0f0f0;
  transition: all 0.2s; /* 简化过渡属性写法 */
}

修正后的HTML结构 #

<h4>记事本主题列表</h4>
<div class="list-container">
  <div class="lines"></div>
  <ul class="list">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
    <!-- 其他列表项 -->
  </ul>
</div>

关键修改说明

• 替换text-indent为padding-left：text-indent仅作用于第一行，padding-left让整段文本缩进，换行后自动对齐下划线起始位置。
• 列表居中：通过body的flex布局实现整体居中，配合固定宽度的列表容器保证排版整齐。
• 动态线条高度：将lines设为绝对定位，取消固定高度，使其随列表内容自动延伸。

2. Express + Node.js + MongoDB 数据渲染实现 #

步骤1：安装依赖 #

在项目目录执行命令：

npm install express mongoose ejs

步骤2：MongoDB连接配置（db.js） #

const mongoose = require('mongoose');

async function connectDB() {
  try {
    await mongoose.connect('mongodb://localhost:27017/notepadDB');
    console.log('MongoDB连接成功');
  } catch (err) {
    console.error('MongoDB连接失败:', err);
    process.exit(1);
  }
}

module.exports = connectDB;

步骤3：数据模型定义（models/Note.js） #

const mongoose = require('mongoose');

const noteSchema = new mongoose.Schema({
  content: {
    type: String,
    required: true
  }
});

module.exports = mongoose.model('Note', noteSchema);

步骤4：Express路由与视图渲染（app.js） #

const express = require('express');
const connectDB = require('./db');
const Note = require('./models/Note');

const app = express();
const port = 3000;

// 设置EJS为模板引擎
app.set('view engine', 'ejs');
app.use(express.static('public')); // 存放CSS等静态资源

// 首页路由：获取所有笔记并渲染
app.get('/', async (req, res) => {
  try {
    const notes = await Note.find();
    res.render('index', { notes });
  } catch (err) {
    res.status(500).send('获取数据失败');
  }
});

// 启动服务器并连接数据库
connectDB().then(() => {
  app.listen(port, () => {
    console.log(`服务器运行在 http://localhost:${port}`);
  });
});

步骤5：EJS模板文件（views/index.ejs） #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>记事本主题列表</title>
  <link rel="stylesheet" href="/css/style.css"> <!-- 引入修正后的CSS -->
</head>
<body>
  <h4>我的笔记</h4>
  <div class="list-container">
    <div class="lines"></div>
    <ul class="list">
      <% notes.forEach(note => { %>
        <li><%= note.content %></li>
      <% }) %>
    </ul>
  </div>
</body>
</html>

步骤6：静态文件目录 #

在项目根目录创建public/css/style.css，将修正后的CSS代码粘贴进去。

内容的提问来源于stack exchange，提问作者ahmad