Question

我想制作一个响应式步骤栏，步骤圆的顶部是年份，而圆的底部是文本，如下所示：

这是我的html代码。

<div class="container">
      <ul class="progressbar">
        <li>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
          <li>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
          <li>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
          <li>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
          <li>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
          <li id="last-child"></li>
  </ul>
</div>

Demo

问题是我不知道如何添加这些年份，请在开始处圈出，在末尾处箭头。请帮助我，我将如何做到这一点并使它响应。我将非常感谢您的帮助。

Answer 1

在您的li中使用标签，然后尝试

 label{
    position: absolute;
    top:-40%;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    font-size:18px;
  }

.container {
      width: 1000px;
      margin: 100px auto; 
  }
  .progressbar {
      counter-reset: step;
  }
  .progressbar li {
      list-style-type: none;
      width: 16.6%;
      float: left;
      font-size: 10px;
      position: relative;
      text-align: center;
      color: #444972;
  }
  .progressbar li:before {
      width: 30px;
      height: 30px;
      content: counter(step);
      counter-increment: step;
      line-height: 30px;
      border: 3px solid #444972;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
  }

  .progressbar li:after {
      width: 100%;
      height: 3px;
      content: '';
      position: absolute;
      background-color: #444972;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
  #last-child:after {
      width: 100%;
      height: 3px;
      content: '';
      position: absolute;
      background-color: #444972;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
#last-child:before {
     display: none;
  }
  .progressbar li:first-child:after {
      /*content: none;*/
  }

  #circle{
    font-size: 24px;
    position: absolute;
    left: 7%;
    top: 16.29%;
    color: #444972;
  }
  
  label{
    position: absolute;
    top:-40%;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    font-size:18px;
  }
  
  /*for circle use this class*/
  .dot {
   height: 18px;
   width: 18px;
   background-color: #444972;
   border-radius: 50%;
   display: inline-block;
   position: absolute;
    top:8px;
    left: -60%;
    bottom: 0;
    right: 0;
}
  
    /*for triangle use this class*/
  .triangle {
    width: 0;
    height: 0;
    overflow: hidden;
}
.triangle:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-top:5px;
    margin-left:78px;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 12px solid #444972;
}

<div class="container">
      <ul class="progressbar">
        <li>
        <span class="dot"></span>
        <label>1998</label>
        Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
          <li>
           <label>2004</label>
          Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
          <li>
           <label>2006</label>
          Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
          <li>
           <label>2014</label>
          Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
          <li>
           <label>2015</label>
          Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</li>
          <li id="last-child">
          <span class="triangle"></span>
          </li>
  </ul>
</div>

Answer 2

希望这会有所帮助。谢谢

  .container {
      width: 1000px;
      margin: 100px auto; 
  }
  .progressbar {
      counter-reset: step;
  }
  .progressbar li {
      list-style-type: none;
      width: 16.6%;
      float: left;
      font-size: 10px;
      position: relative;
      text-align: center;
      color: #444972;
  }
  .progressbar li:before {
      width: 30px;
      height: 30px;
      content: counter(step);
      counter-increment: step;
      line-height: 30px;
      border: 3px solid #444972;
      display: block;
      text-align: center;
      margin: 0 auto 10px auto;
      border-radius: 50%;
      background-color: white;
  }

  .progressbar li:after {
      width: 100%;
      height: 3px;
      content: '';
      position: absolute;
      background-color: #444972;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
  #last-child:after {
      width: 100%;
      height: 3px;
      content: '';
      position: absolute;
      background-color: #444972;
      top: 15px;
      left: -50%;
      z-index: -1;
  }
#last-child:before {
     display: none;
  }
  .progressbar li:first-child:after {
      /*content: none;*/
  }

  #circle{
    font-size: 24px;
    position: absolute;
    left: 7%;
    top: 16.29%;
    color: #444972;
  }

.outer{position:realative}

.year{
  position: absolute;
    top: -40px;
    left: 50%;
    transform: translatex(-50%);
}

.progressbar{position:relative;}

.progressbar:before{
  content: "";
    position: absolute;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: black;
    left: -10px;
    top: 12px;
}
.progressbar:after{
      content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-right: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-left: 10px solid black;
    right: 63px;
    top: 5px;
}

<div class="container">
      <ul class="progressbar">
        <li>
          <div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
          <li>
          <div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
        <li>
          <div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
        <li>
          <div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
        <li>
          <div class="outer"><p class="year">1990</p>Visionet was founded lorem ipsum dolor sit amet New York USA by Arshad Masood</div></li>
          <li id="last-child"></li>
  </ul>
</div>

如何在HTML CSS中制作响应式步骤栏

2 个答案: