时间戳

首页 > 解决方案 > CSS中的响应式部分指示器

javascript - CSS中的响应式部分指示器

问题描述

我正在构建一个自定义场景指示器，向用户指示他目前在哪个场景中，到目前为止 javascript 是好的，我的问题是 css 我希望我的场景指示器至少对大于中等屏幕的屏幕做出响应。这是我的 html 代码：

    <div class="text-center scroll-navigation-indicator">
<span class="active-index"></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span class="last"></span>
</div>

这是我的 scss 代码：

.scroll-navigation-indicator {
    position: fixed;
    top: 0;
    padding: 25px 0;
    left: 50%;
    z-index: 1500;
    box-sizing: content-box;
    background-color: transparent;
    transform: translateX(-50%);
    inline-size: fit-content;
    width: 1200px;
    display: flex;
    justify-content: space-between;

    span {
        width: 20px;
        height: 20px;
        background-color: black;
        display: inline-block;
        position: relative;
        border-radius: 50%;
        cursor: pointer;
        margin: 0 10px;
    }

    span:after {
        content: '...............................';
        margin-left: 10px;
        position: absolute;
        top: -3px;
        left: 100%;

    }

    span:last-of-type:after {
        content: ""
    }

    span.active-index {
        background-color: black;
        width: 30px;
        height: 30px;
        position: relative;
        top: -5px;
    }

    span.active-index:after {
        content: "...............................";
        top: 3px;
    }

    span.active-index.last:after {
        content: "";
    }

    span.active-index:before {
        border-radius: 50%;
        padding: 5px;
        border: 2px solid black;
        position: absolute;
        content: '';
        top: -6px;
        left: -6px;
        bottom: -6px;
        right: -6px;
    }
}

这是在codepen中编译的结果。我的问题是我将 div 容器设置为，width:1200px因为它使每个span:after显示都正确。如果有任何其他解决方案，我将很高兴听到并实施它。祝大家编码愉快。

标签： javascripthtmlcssreactjs

解决方案

通过使用display: flex和flex-wrap: nowrap添加一些CSS，我们将实现这一点。请看下面的片段。

.scroll-navigation-indicator {
    display: flex;
    flex-wrap: nowrap; /* Specifies that the flexible items will not wrap */
    margin: 30px 0;
    overflow: hidden;
    color: #333;
    padding:10px 0;
}

.scroll-navigation-indicator li {
    position: relative;
    list-style-type: none;
    flex: 1; /* Let all the flexible items be the same length, regardless of its content */
}

.scroll-navigation-indicator li:before {
    width: 20px;
    height: 20px;
    content: '';
    display: block;
    background: #000;
    border-radius: 50%;
    margin: auto;
    padding: 0px;
    border: 4px solid #fff; /* to add space between dots and border */
}

.scroll-navigation-indicator li:after {
    content: '';
    width: 100%;
    border-bottom: 2px dashed #000;
    position: absolute;
    top: 50%; /* to  vertically center the border */
    transform: translateY(-50%); /* to  vertically center the border */
    z-index: -1;
}

.scroll-navigation-indicator li:after {
    left: 50%
}

.scroll-navigation-indicator li:last-child:after {
    content: none;
}

.scroll-navigation-indicator li.active-index:before{
  box-shadow: inset 0px 0px 0px 4px transparent, 0px 0px 0px 2px #000; /* to have circle for active-index*/
}
  <ul class="scroll-navigation-indicator">
    <li class="active-index">
    </li>
    <li class="active-index">
    </li>
    <li class="">
    </li>
    <li class="">
    </li>
    <li class="">
    </li>
    <li class="">
    </li>
    <li class="">
    </li>
    <li class="">
    </li>
  </ul>

推荐阅读