使用CSS扩展超过固定宽度的boder

Question

想要提出一个问题，以帮助提出一个解决方案，将扩展边界顶部的元素扩展到容器的固定宽度设置为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

你不能让一个元素的边框延伸过该元素的尺寸。但是你可以通过使用position: absolute;来让你的div突破main。

实施例：

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