Question

调整浏览器窗口大小后，边框会从内容中移开？

无论窗户的高度如何，我怎样才能实现边框保留在一个地方的设计？

＆＃13;

.story_header {
  position: relative;
  display: flex;
  justify-content: center;
}

.story_header:before,
.story_header:after {
  content: '';
  width: 100px;
  position: absolute;
  border: 2px solid black;
  margin-top: 20px;
  left: 35%;
}

.story_header:after {
  right: 35%;
  left: auto;
}

＆＃13;

<div class='section_1'>
  <div class="grid-x">
    <div class='large-12 cell'>
      <h2 class='story_header'>Our Story</h2>
    </div>
  </div>

＆＃13;

Answer 1

你需要包装我们的故事＆＃39;对于一个元素，我们说span然后在span上添加伪元素。试试这个：

CSS：

.story_header{
    position:relative;
    display:flex;
    justify-content: center;
}

.story_title{
    position:relative;
}

.story_title:before, .story_title:after{
    content:'';
    width:100px;
    position:absolute;
    border:2px solid black;
    margin-top:20px;
}

.story_title:before{
    right:100%;
}

.story_title:after{
    left:100%;
}

HTML：

<div class="grid-x">
    <div class='large-12 cell'>
        <h2 class='story_header'> <span class="story_title">Our Story</span></h2>
    </div>
</div>

CSS - 防止边框移动滚动

1 个答案: