Css 在浏览器调整大小时使图元边框与浏览器窗口相交

当我缩小浏览器屏幕时，如何使元素的边框平滑地与窗口的边缘相交，而文本与窗口的侧面保持15px的距离

我有以下HTML：

<section>
 <header>
  <h1>Header Text</h1>
 </header>
</section>

标题文本

---

您需要使用媒体查询来定位h1元素：

body{padding:0;margin:0;}
section{max-width:1000px;margin:10px auto;}
header{border-top:1px solid black}

@media (max-width: 1030px) {
  h1{position: absolute; left: 15px}
}

---

这是上显示的解决方案

…和媒体查询对您没有帮助，因为？？：即使是媒体查询，我也无法理解。请发布您在媒体查询中完成的代码……我会检查并更新它！我在问题的底部贴了一些代码，看到了吗？关键是，在调整大小时，边框必须平滑地与浏览器的边缘相交，但一旦文本距离屏幕边缘15px，文本就必须停止向屏幕的一侧移动。我认为您无法在截面元素上设置“最大宽度”属性，从而实现所需的结果。您必须设置标题元素的最大宽度。看看我的答案，让我知道这是否有效！这难道不会使边框成为整个屏幕的宽度吗？我希望顶部边框的最大宽度为1000px。哦，我误解了你的要求。让我来解决我的问题@NickManning检查此解决方案。如果我理解正确，这就是你想要的？实际上是一个非常聪明的解决方案！几乎准备好接受您的答案了……但我希望在标题下有文本，应用position-absolute将元素从文档流中移除。你有什么解决办法吗？好的……我只需在包装上加上一个固定的高度，就可以让它工作了。好在我知道h1不会跨越多条线。那不管用，但现在对我管用了。很好的解决方案，再次感谢！