Javascript 一些hr标签内部有间隙，而另一些没有'；T

我有一个，基本上是一个待办事项应用程序。todo项实际上是

li

元素，这些元素具有文本、

按钮

和

hr

。他们中的一些人有

hr

，里面有空格，而另一些人没有

图片：

HTML:

const j=$；
j（（）=>{
设validify=txt=>{
如果（txt.length>0）{
j（“#ctn”）.append（`li class='td'>${txt}disease
`）；
}
j（'.td btn'）.on（'mouseenter'，function（）{
console.log（'added'）；
j（本）
.parent（）
.addClass（“del”）；
console.log（j（this.parent（）.attr（'class'））
}).on（'mouseleave'，function（）{
console.log（'已删除'）
j（本）
.parent（）
.removeClass（“del”）；
}).on（'单击'，函数（））{
j（this）.parent（）.css（'display'，'none'）；
});
j（#addtd'）.val（“”）；
}
有效（“”）；
j（'#btn'）。在（'click'，（）=>{
validify（j（“#addtd'）.val（））；
});
});
@导入url（“https://fonts.googleapis.com/css?family=Lato");
* {
框大小：边框框；
字体系列：Lato；
}
身体{
保证金：0；
填充：3vh 7vw；
背景：#004D40；
}
#在ctn中{
位置：固定；
宽度：86vw；
高度：16vh；
背景：#388E3C；
盒影：0 6px 9px#2727；
z指数：2；
}
#btn{
位置：绝对位置；
边界半径：100%；
大纲：无；
边界：无；
右：7vh；
顶部：3vh；
宽度：10vh；
高度：10vh；
字体：500 8vh arial；
显示：内联块；
过渡：0.25s全部；
背景：#CDDC39；
}
#btn：悬停{
盒影：0.2px1pRGBA（0,0,0,0.33）；
转换：比例（1.1）；
}
#btn：活动{
变换：translateY（4px）；
}
#添加{
位置：绝对位置；
大纲：无；
边界：无；
背景：rgba（255,255,255,0.33）；
宽度：50vw；
高度：6vh；
顶部：5vh；
左：5vw；
字体：500 14磅拉托；
填充：0 10px；
}
#addtd:：占位符{
颜色：#FFF；
}
#ctn{
位置：绝对位置；
顶部：27vh；
宽度：86vw；
背景：#388E3C；
盒影：0 6px 9px#2727；
填充：3vh 5vw；
z指数：1；
}
li.td{
字体：500 20磅拉托；
列表样式：无；
颜色：#FFF；
}
button.td-btn{
浮动：对；
大纲：无；
边界：无；
背景#E53935；
高度：20px；
位置：相对位置；
顶部：25px；
颜色：#FFF；
}
人力资源{
边框：7px实心#9E9D24；
填充：0；
}
德尔先生{
颜色：#CDDC39！重要；
}

+

编写Todo应用程序
解雇



为元素设置样式
解雇



调试一些问题
解雇



散步
解雇


这个问题似乎与浏览器有关，因为它对大多数人都很有效。您的浏览器可能具有
hr
元素的默认样式。然而，现在用水平线来表示术语是一种不好的做法

您可以在
li
元素上使用
边框底部
。如果要将边框放置在低于默认位置的位置，可以在
li
元素上使用
padding bottom
。这样，您的HTML结构看起来也更加清晰

例如，将CSS选择器
li.td
的样式更改为以下样式可以实现此目的：

如果您确实需要使用
hr
元素，您可以尝试删除所有默认页边距，因为某些浏览器在默认情况下会添加页边距。为此，请向元素添加以下样式：

这将导致

您是否编辑了笔以解决此问题？查看画笔预览时，所有的
标记都会在没有空格的情况下呈现

我唯一的建议是，在HTML中，不需要显式关闭标签，除非您使用的是XHTML，否则需要正确关闭标签。由于您只是在编写HTML，所以我将使用
这是由于CSS亚像素渲染而发生的。
当您放大/缩小浏览器时，重新缩放的元素将留下5.75px等像素值。供应商决定如何处理

在您的情况下，最简单的修复方法（至少在Chrome中）是取消边框半径为0px，而是将hr的高度设置为边框的两倍，并为其提供背景色：

border: 0px solid #9E9D24;
padding: 0;
height: 14px;
background: #9E9D24;

请在这里发布您的代码片段。因此不鼓励使用外部链接的片段。是我的眼睛不好还是我看不出问题出在哪里？代码笔在我看来很好。@Rahul默认情况下
标记有一些空白<代码>边距：0

如果它不起作用，请添加您的代码段。我在Chrome上没有发现问题-您在哪个浏览器上看到问题？我注意到它的放大率为90%。这是您的情况吗？感谢

border-bottom

css属性！谢谢你的回答！

margin: 0

hr {
  border: 7px solid #9E9D24;
  padding: 0;
  margin: 0;
}

border: 0px solid #9E9D24;
padding: 0;
height: 14px;
background: #9E9D24;