极客观点
项目管理
HarmonyOS
现有三个文件，分别为index.html，index.js，style.css，主体代码如下：
index.html
<head>
...
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./index.js"></script>
</body>
index.js
new Vue({
el: "#app",
data() {
currentLi: 1
},
template:
`<ul class=c1>
<li class=c2 :class="{c3:currentLi === 1}">1</li>
<li class=c2 :class="{c3:currentLi === 2}">2</li>
<li class=c2 :class="{c3:currentLi === 3}">3</li>
</ul>`
});
style.css
.c1 {
border-bottom: 1px black solid;
list-style: none;
padding-left: 0;
}
.c2 {
display: inline-block;
border: 1px black solid;
border-bottom: none;
margin-right: 10px;
padding: 5px 15px 5px 15px;
}
.c3 {
border-top: 3px red solid;
border-bottom: 1px solid black;
}效果图如下：
如何消除li的边框带来的缝隙
不同的浏览器在li标签有不同的展示效果，但是都会有默认的间隔样式。而且还有一点，间隙坑是由你的代码中每个li之间使用了回车或者空格，而根据li渲染也把这些字符进行渲染了。
建议修改：