Блог

Главная - Вопросы по программированию - Как провести линию между переключателями?

Как провести линию между переключателями?

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Я пытался применить тот же дизайн к изображению ниже, используя HTML / CSS, и это то, чего я пока достиг.

изображение

 .slider{
  display: flex;
  margin: 0 auto;
  text-align: center;
  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10rem;
    
  }  
 <ul class="slider">
          <li class="slider-item">
            <label for="f-option">In Depth Knowledge</label>
            <input type="radio" id="f-option">
          </li>
          <li class="slider-item">
            <label for="g-option">Exellence amp; Education</label>
            <input type="radio" id="g-option">
          </li>
          <li class="slider-item">
            <label for="k-option">In Depth Knowledge</label>
            <input type="radio" id="k-option">
          </li>
        </ul>

Комментарии:

1. где находится изображение?

2. Добро пожаловать в stackoverflow! Пока у вас на самом деле нет вопроса. Спасибо за предоставление вашего кода, но мы не знаем, чего вы пытаетесь достичь.

3. не вижу, с какой проблемой вы действительно столкнулись

4. drive.google.com/file/d/16Vhv3xQfJvd7ukVrT_RpQe5rsifyM5fG /… вот ссылка на изображение

5. найдите этот пример и примените его в своем коде: mdbootstrap.com/docs/jquery/components/stepper

Ответ №1:

Используйте приведенный ниже код:

Используя li{flex: 0 1 33%;} и для использования строки pseudo как :after

Смотрите fiddle

ВНИМАНИЕ!

Если вы хотите, чтобы пользователь мог выбрать только одну из переключателей, используйте name attr

     .slider {
      display: flex;
      margin: 0 auto;
    }

    label {
      width: 80px;
      display: block;
    }

    input {
      margin-left: 30px;
      margin-right: -1px;
    }

    li {
      flex: 0 1 33%;
      list-style: none;
      position: relative;
    }

    li:not(:last-child):after {
      content: "";
      position: absolute;
      height: 1px;
      width: 100%;
      background: black;
      top: 45px;
    }  
 <ul class="slider">
  <li class="slider-item">
    <label for="f-option">In Depth Knowledge</label>
    <input type="radio" id="f-option" name="rb">
  </li>
  <li class="slider-item">
    <label for="g-option">Exellence amp; Education</label>
    <input type="radio" id="g-option" name="rb">
  </li>
  <li class="slider-item">
    <label for="k-option">In Depth Knowledge</label>
    <input type="radio" id="k-option" name="rb">
  </li>
</ul>