使用CSS将boder扩展到固定宽度

Question

想要提出一个问题，以帮助提出解决方案，将元素的border-top扩展到设置为width: 1024px;的容器的固定宽度。同时将内容保持在页面的中心，与左侧对齐。

谢谢！

以下是代码

HTML

<main>
    <div>
      <span>Hello</span>
    </div>

  </main>

CSS

main {
margin: 0 auto;
width:1024px;

}


div {
  float:left;
  width:50%;
  transition:all 0.4s ease;

}

div:hover {
 background:red;
}

Answer 1

您无法使元素的边框延伸超过该元素的尺寸。但是，您可以使用div使main突破position: absolute;。

示例：

div {
  float:left;
  width:60%;
  transition:all 0.4s ease;
  border-top: solid black 5px;
  position: absolute;
}