Блог

Я создаю пользовательский индикатор сцены, который указывает пользователю, в какой сцене он находится в данный момент, пока 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 правильно отображает все.
если есть какое-либо другое решение, я буду рад его услышать и реализовать.
всем приятного кодирования.

Используя 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>