如何实现一个hr水平线能够左右两侧都超出上方的div标签10px

您可以通过CSS的伪元素 ::before 和 ::after 来实现这个效果。首先，您可以创建一个带有 hr 标签的 div，然后为 hr 标签添加上下边框。接着，使用 ::before 和 ::after 伪元素为 hr 标签添加左右两侧的超出效果。具体的实现代码如下：

HTML代码：

<div class="hr-div">
  <hr>
</div>

CSS代码：

.hr-div {
  position: relative;
  width: 100%;
  height: 20px;
}

.hr-div hr {
  border: none;
  border-top: 1px solid #ccc;
  position: absolute;
  top: 50%;
  width: 100%;
}

.hr-div hr::before,
.hr-div hr::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 10px;
  height: 1px;
  background-color: #ccc;
}

.hr-div hr::before {
  left: -10px;
}

.hr-div hr::after {
  right: -10px;
}

这个样式可以使 hr 标签在中间水平居中，同时左右两侧都超出上方的 div 标签 10px。

相关问题

如何使一个hr标签在div里居中

您可以使用CSS的绝对定位和transform属性来实现hr标签在div里居中的效果。具体步骤如下：

1. 将hr标签的position属性设置为absolute，这样它才能脱离文档流，方便后面的绝对定位。

2. 将hr标签的top属性设置为50%，这样它就垂直居中了，但是水平方向还需要调整。

3. 使用transform属性将hr标签向左移动一半宽度的距离，这样它就水平居中了。

下面是实现hr标签在div里居中的CSS代码示例：

.hr-div {
  position: relative;
  width: 100%;
  height: 20px;
}

.hr-div hr {
  border: none;
  border-top: 1px solid #ccc;
  position: absolute;
  top: 50%;
  transform: translateX(-50%);
  width: 50%;
}

在这个示例中，将hr标签的宽度设置为50%，是为了让它比较短，不会占满整个div的宽度。如果您希望hr标签占满整个div的宽度，可以将它的宽度设置为100%。

div a下的一个div b中的三个a标签相对div a 的宽度水平居中显示并且间距为10px

要实现 `div b` 中的三个 `<a>` 标签相对于 `div a` 的宽度水平居中显示，并且之间的间距为 10px，您可以使用 flexbox 布局。

HTML:

<div class="container">
  <div class="b">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

CSS:

.container {
  display: flex;
  justify-content: center;
}

.b {
  display: flex;
  justify-content: center;
}

.b a {
  margin: 0 5px;
}

首先，我们使用 flexbox 布局将 `div.container` 设置为一个 flex 容器，并使用 `justify-content: center` 将其中的内容水平居中对齐。

然后，我们将 `div.b` 也设置为一个 flex 容器，并使用 `justify-content: center` 将其中的内容水平居中对齐。

最后，通过给 `div.b a` 设置 `margin` 属性来设置相邻 `<a>` 标签之间的间距为 10px。

这样，`div.b` 中的三个 `<a>` 标签将相对于 `div.a` 的宽度水平居中显示，并且之间的间距为 10px。 您可以根据需要调整 `margin` 的值以获得所需的间距大小。