摘要：最简单的列表页是表格，其实使用DIV+CSS布局更简单，也更灵活，本文给出一个布局的小例子，读者可以根据需要在实际项目中调整。
1. 先来看下效果
- 分行展示
- 列表页内容需要居中，两侧需要留白。
- 隔行需要有线条隔开，视觉更容易对齐每行的标题与操作。
- 标题靠左，操作靠右
2. 要点CSS
2.1 分行使用HTML列表标签ul-li实现
<ul>
<li>
标题标题标题标题标题标题标题标题标题标题1
</li>
<li>
标题标题标题标题标题标题标题标题标题标题1
</li>
</ul>
2.2 列表页内容需要居中，两侧需要留白。
使用Margin左右留出百分之十的空白
margin: 0 10%;
2.3 隔行需要有线条隔开，视觉更容易对齐每行的标题与操作
使用边框渲染每个列表行的分割线
border-bottom: 1px solid #eee;
2.4 标题靠左，操作靠右
使用DIV的float让操作区漂移到右边
float: right;
2.5 使用Bootstrap调整列表的上下间距
用到的bootstrapCSS解释，py-3 ，p代表padding内边距，y取义为坐标xy轴代表垂直的意思。py-3就是：垂直方向内边距3等大小，py-4就是4等，依次类推。
bootstrap的作用是把常用的CSS根据使用场景的效果起名（比如大边距，小边距，警示颜色等等），你只关心想要什么效果，而不用去考虑不同配色的语义与字号边距大小的细节。
如下是py-3的bootstrap源码，自己写也是一样的（个人非常喜欢bootstrap的命名，非常简洁，但背后都有含义）。
.py-3 {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
3.全部源码
可以建立一个html文件，拷贝进去，使用浏览器打开就可以看到效果。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<style>
#mainDiv {
/*左右留出百分之十的空白*/
margin: 0 10%;
/*内边距根据自己喜好设置，如果整体有边框，比较有用*/
padding: 2% 2% 2% 2%;
/*子Div使用Float后会撑开父Div*/
overflow: hidden;
}
/*渲染每个列表行的分割线，底部画条线，不要样式*/
.repo-list-item {
border-bottom: 1px solid #eee;
list-style: none;
position: relative;
}
/*操作链接区域，漂浮到右边，字体用灰色弱化视觉效果，字号小一些，弱化自己，突出标题*/
.entry-header {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, Helvetica, STKaiti, SimSun, serif;
color: #a8a8a7;
font-size: 0.8em;
font-style: italic;
float: right;
}
/*操作链接字体等同设置，覆盖链接设置，强制弱化*/
.entry-header a {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, Helvetica, STKaiti, SimSun, serif;
color: #6a737d;
margin: 0 2px;
}
</style>
</head>
<body>
<main id="mainDiv">
<div id="articleVue">
<ul style="padding: 0px">
<li class="repo-list-item py-3">
<div class="entry-header">
<a href='#'>编辑</a>
<a href='#'>组织</a>
(2021年11月08日)
</div>
<a href='#'>标题标题标题标题标题标题标题标题标题标题1</a>
</li>
<li class="repo-list-item py-3">
<div class="entry-header">
<a href='#'>编辑</a>
<a href='#'>组织</a>
(2021年11月08日)
</div>
<a href='#'>标题标题标题标题标题标题标题标题标题标题1</a>
</li>
<li class="repo-list-item py-3">
<div class="entry-header">
<a href='#'>编辑</a>
<a href='#'>组织</a>
(2021年11月08日)
</div>
<a href='#'>标题标题标题标题标题标题标题标题标题标题1</a>
</li>
</ul>
</div>
</main>
</body>
</html>
