Question

.circle{
      padding:20px !important;
}
h2{
  margin:unset;
}
  .circle-text {
    display: block;
    margin: auto;
    height: 120px;
    width: 120px;

    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: #FF9800 ;
    color: #fff;
    font: 18px "josefin sans", arial;
    line-height: 120px;


  }

.a {
  display: inline-block;
  position: relative;  
}
.a:before,
.a:after {
  content: "";
  position: absolute;
  height: 60px;
  border-bottom: 5px solid black;
  top:0;
  width: 293px;

}
.a:before {
  right: 100%;
  margin-right: 0px;
}
.a:after {
  left: 100%;
  margin-left:0px;
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-section-align  uk-margin-xlarge-top">
 <div class="uk-container">
   <div class="uk-text-center" uk-grid>
     <div class="uk-width-1-3 circle">
       <div class="circle-text ">
         <i class="medium material-icons">Step 1</i>
       </div>
       <p class="center-align  uk-margin-top">Choose Your Trip</p>
     </div>
     <div class="uk-width-1-3 ">
       <div class="circle-text a">
         <i class="medium material-icons">Step 2</i>
       </div>
       <p class="center-align uk-margin-top ">Request for reservation</p>
     </div>
     <div class="uk-width-1-3">
       <div class="circle-text ">
         <i class="medium material-icons">Step 3</i>
       </div>
       <p class="center-align  uk-margin-top">Successfully</p>
     </div>
   </div>
 </div>
</div>

我想使用纯CSS和uikit 3制作响应式进度栏。我编写的这段代码是在桌面模式下显示时起作用的。当我将桌面模式切换到移动模式时，中间的黑线同时击中两个圆圈。我只想当它在移动模式下显示时也只能触摸圆圈。请提出一些建议。

Answer 1

对伪元素（黑线）使用z-index。

将其设置为-1，以使其超出圆圈。

尝试一下

.circle{
      padding:20px !important;
}
h2{
  margin:unset;
}
  .circle-text {
    display: block;
    margin: auto;
    height: 120px;
    width: 120px;

    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: #FF9800 ;
    color: #fff;
    font: 18px "josefin sans", arial;
    line-height: 120px;


  }

.a {
  display: inline-block;
  position: relative;  
}
.a:before,
.a:after {
  content: "";
  position: absolute;
  height: 60px;
  border-bottom: 5px solid black;
  top:0;
  width: 293px;

}
.a:before {
  right: 100%;
  margin-right: 0px;
  z-index: -1;
}
.a:after {
  left: 100%;
  margin-left:0px;
  z-index:-1
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-section-align  uk-margin-xlarge-top">
 <div class="uk-container">
   <div class="uk-text-center" uk-grid>
     <div class="uk-width-1-3 circle">
       <div class="circle-text ">
         <i class="medium material-icons">Step 1</i>
       </div>
       <p class="center-align  uk-margin-top">Choose Your Trip</p>
     </div>
     <div class="uk-width-1-3 ">
       <div class="circle-text a">
         <i class="medium material-icons">Step 2</i>
       </div>
       <p class="center-align uk-margin-top ">Request for reservation</p>
     </div>
     <div class="uk-width-1-3">
       <div class="circle-text ">
         <i class="medium material-icons">Step 3</i>
       </div>
       <p class="center-align  uk-margin-top">Successfully</p>
     </div>
   </div>
 </div>
</div>

Answer 2

尝试一下

.circle{
      padding:20px !important;
}
h2{
  margin:unset;
}
  .circle-text {
    display: block;
    margin: auto;
    height: 120px;
    width: 120px;

    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    background: #FF9800 ;
    color: #fff;
    font: 18px "josefin sans", arial;
    line-height: 120px;


  }

.a {
  display: inline-block;
  position: relative;  
}

/* 
.a:before,
.a:after {
  content: "";
  position: absolute;
  height: 60px;
  border-bottom: 5px solid black;
  top:0;
  width: 293px;

}
.a:before {
  right: 100%;
  margin-right: 0px;
}
.a:after {
  left: 100%;
  margin-left:0px;
 
}
*/

.uk-process-step {
  position: relative;
}

.uk-process-step:before {
  top: 60px;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 100%;
  height: 5px;
  background-color: black;
}
.uk-process-step .uk-width-1-3 {
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.25/css/uikit.min.css" rel="stylesheet"/>
<div class="uk-section-align  uk-margin-xlarge-top">
 <div class="uk-container">
   <div class="uk-text-center uk-process-step" uk-grid>
     <div class="uk-width-1-3 circle">
       <div class="circle-text ">
         <i class="medium material-icons">Step 1</i>
       </div>
       <p class="center-align  uk-margin-top">Choose Your Trip</p>
     </div>
     <div class="uk-width-1-3 ">
       <div class="circle-text a">
         <i class="medium material-icons">Step 2</i>
       </div>
       <p class="center-align uk-margin-top ">Request for reservation</p>
     </div>
     <div class="uk-width-1-3">
       <div class="circle-text ">
         <i class="medium material-icons">Step 3</i>
       </div>
       <p class="center-align  uk-margin-top">Successfully</p>
     </div>
   </div>
 </div>
</div>

响应进度圈步栏

2 个答案: