Question

我制作逐步数字但是在响应方面有一些问题，那就是当我们在小屏幕水平滚动条中出现顶部红线时。

请参阅此链接： - jsfiddle

<div class="container">
  <br><br>
  <div class="col-md-8">
    <div class="row">
      <div class="col-md-12">
        <div class="career-area">
          <div class="top-border"></div>
          <div class="car-Circle1">
            <i><b>01</b></i>
          </div>

          <div class="car-Circle2">
            <i><b>02</b></i>
          </div>

          <div class="car-Circle3">
            <i><b>03</b></i>
          </div>

          <div class="car-Circle4">
            <i><b>04</b></i>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

可以通过设置.top-border到hidden的溢出来删除水平滚动条：

.career-area .top-border {
    width: 100%;
    border-radius: 50px 0px 0px 0px;
    border-top: solid 19px #cc3053;
    border-left: solid 19px #cc3053;
    height: 145px;
    position: relative;
    z-index: 1;
    overflow: hidden;

Answer 2

在那里，我尝试重新设计它并建议以下代码以获得帮助。 1.如果.top-border中的.career-area使用以下代码。

.career-area .top-border:after {
    content: "";
    border-top: solid 19px #cc3053;
    top: -19px;
    width: 100%;
    right: calc(100px - 100%);
    /* position: absolute; */
}

2。如果.top-border中的.container使用以下代码。

.container
{
    overflow: hidden;
}
.career-area .top-border:after {
    content: "";
    border-top: solid 19px #cc3053;
    top: -19px;
    width: 100%;
    right: calc(1px - 100%);
    position: absolute; 
}

2。如果屏幕宽度为.top-border，请使用以下代码。

html,body{ overflow: hidden; }

   .career-area .top-border:after {
        content: "";
        border-top: solid 19px #cc3053;
        top: -19px;
        width: 100%;
        right: calc(1px - 100%);
        position: absolute; 
    }

此代码仅隐藏您的总宽度，不会继承父高，溢出隐藏隐藏溢出边框。

如何制作正确的全宽线

2 个答案: