Question

这是我的代码：

<span>test</span>
<div></div>

{{1}}

如您所见，该黑线仍在文字上。我为文本设置了白色背景颜色。为什么不出现？

我想在文字的边缘剪掉那条黑线。换句话说，该行应该包围文本。

Answer 1

span需要的位置，即position: relative z-index工作

＆＃13;

body{
  text-align: center;
}

span{
  position: relative;
  background-color: white;
  z-index: 2;
}

div{
  border-top: 1px solid;
  position: absolute;
  width: 100%;
  margin-top: -8px;
  z-index: 1;
}

＆＃13;

<span>test</span>
<div></div>

＆＃13;

Answer 2

将position:relative添加到范围。

＆＃13;

body{
  text-align: center;
}

span{
  position:relative;
  background-color: white;
  z-index: 2;
}

div{
  border-top: 1px solid;
  position: absolute;
  width: 100%;
  margin-top: -8px;
  z-index: 1;
}

＆＃13;

<span>test</span>
<div></div>

＆＃13;

Answer 3

你的身体标签在哪里？

＆＃13;

body{
  text-align: center;
}

span{
  background-color: red;
  z-index: 2;
}

div{
  border-top: 1px solid;
  position: absolute;
  width: 100%;
  margin-top: -8px;
  z-index: 1;
}

＆＃13;

<body>
    <span>test</span>
    <div></div>
</body>

＆＃13;

为什么背景颜色：白色;不起作用？

3 个答案: