【问题标题】:fix step line responsive css修复步进线响应式 css
【发布时间】:2017-01-20 15:23:54
【问题描述】:

这就是我想要达到的目标:

这是我的代码产生的:

.line {
  position: relative;
  background-color: #f1f1f1;
  width: 34%;
  height: 2px;
  bottom: 36px;
  left: 33%;
}

如何调整我的代码以使该行响应?

【问题讨论】:

标签: javascript html css


【解决方案1】:

演示:https://jsfiddle.net/kc1tbu8x/2/

HTML:

<div class="wrapper">
<div class="step1">
  <hr/>
</div>

<div class="step2">
  <div class="step2_circles">1</div>
  <div class="step2_circles">2</div>
  <div class="step2_circles">3</div>
</div>
</div>

CSS:

.wrapper{
  width:30%;
  height:40px;
   display:block;
   position:relative;
}
.step1{
  width:98%;
  z-index:-9999;
  position:absolute;
  top:25%;
  display:block;
  margin:auto;

}
.step2{
  width:100%;
   display:flex;
  display:-webkit-flex;
  -webkit-justify-content: space-between;
    justify-content: space-between;
}
.step2_circles{
  width:40px;
  height:40px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  background:#ff0000;
  text-align:center;
  line-height:40px;

}

演示:https://jsfiddle.net/kc1tbu8x/2/

【讨论】:

    【解决方案2】:

    还有一种方法,不过我觉得上面的flexbox方案不错。 演示:http://codepen.io/anon/pen/XppLjW

    HTML:

    <div class="steps">
      <span>1</span>
      <span>2</span>
      <span>3</span>
    </div>
    

    CSS:

    .steps {
      width: 100%;
      height: 80px;
      max-width: 80%;
      margin: 3em auto;
      text-align: center;
      position: relative;
    }
    .steps::before {
      left: 0;
      top: 50%;
      content: '';
      width: 100%;
      height: 1px;
      display: block;
      position: absolute;
      background-color: #e5e5e5;
    }
    .steps span {
      width: 80px;
      height: 80px;
      line-height: 80px;
      border-radius: 50%;
      text-align: center;
      position: absolute;
      display: inline-block;
      background-color: #d4d4d4;
    }
    .steps span:first-child {
      left: 0;
    }
    .steps span:nth-child(2) {
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
    }
    .steps span:last-child {
      right: 0;
    }
    

    【讨论】:

      【解决方案3】:

      试试看,很好的例子

      <div class="container">
        <div class="number">1</div>
        <div class="number">2</div>
        <div class="number">3</div>
      </div>
      
      .container {
        display: flex;
        justify-content: space-between;
        position: relative;
      }
      
      .container:before {
        content: '';
        display: block;
        height: 2px;
        width: 100%;
        position: absolute;
        top: 50%;
        margin-top: -1px;
        background:red;
      }
      
      .container .number {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: blue;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        z-index: 10;
      }
      

      JSfiddle 示例https://jsfiddle.net/4j07gbrd/

      【讨论】:

        【解决方案4】:
        .line
        {
          z-index:5;
          position: relative;
          background-color: #f1f1f1;
          width: 34%;
          height: 2px;
          bottom: 36px;
          left: 33%;
        }
        .yourcircle class
        {
          z-index:4;
        }
        

        【讨论】:

          【解决方案5】:

          您可以将媒体查询添加到移动设备,因为条纹不能在移动设备上占 33% 的中心(整行 90%)

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2014-06-05
            • 2019-09-07
            • 1970-01-01
            • 1970-01-01
            相关资源
            最近更新 更多