Question

我有一个Ruby on Rails Web应用程序。对于前端，我使用haml和sass。所以，基本上，我有一系列按钮，我想创建一条贯穿它们的直线。我尝试在按钮后面放置一个div并使用底部边框来实现该线，但是让它与按钮的中心完美对齐非常困难。

这是我的haml：

 .stepwizard
     .stepwizard__row
      .stepwizard__step
       %a.btn.stepwizard__btn{ href: "#", title: 'Choose Payment',class: stepwizard_active_class(active, 'payment') } 1
       %p.stepwizard__step-text Payment
  .stepwizard__step
       %a.btn.stepwizard__btn{ href: "#", title: 'Delivery Options', class: stepwizard_active_class(active, 'delivery') } 2
       %p.stepwizard__step-text Delivery 
 .stepwizard__step
       %a.btn.stepwizard__btn{ href: "#", title: 'Billing Info', class: stepwizard_active_class(active, 'billing') } 3
       %p.stepwizard__step-text Billing 
.stepwizard__step
      %a.btn.stepwizard__btn{ href: "#", title: 'Summary', class: stepwizard_active_class(active, 'summary') } 4
      %p.stepwizard__step-text Summary

和scss：

   .stepwizard {
     background: #005DFF;
     padding: 40px 50px 40px;

    &__row {
     display: flex;
     width: 100%;
     justify-content: space-between;
     position: relative;

     &:before {
        top: 14px;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 100%;
        height: 1px;
        background-color: #005DFF;
        z-order: 0;
           }
         }
        &__step {
          text-align: center;
          position: relative;
          button[disabled] {
            opacity: 1 !important;
            filter: alpha(opacity=100) !important;
              }
          }
        &__step-text {
           margin-top: 10px;
           position: absolute;
           color: white;
           min-width: 110px;
           left: 50%;
           top: 30px;
           transform: translateX(-50%);
        }
        &__btn {
          width: 30px;
          height: 30px;
          color: #005DFF;
          text-align: center;
          padding: 6px 0;
          font-size: 12px;
          line-height: 1.428571429;
          border-radius: 15px;
            }
          }

任何人对如何实现这一点有任何想法？

Answer 1

只是一个sudo代码，我相信你看起来像这样。关键点是

Line Div应位于具有position: absolute
按钮组div可以是position:relative或绝对（如果是绝对的话，你可能需要调整z-index）
最后是一个带有position: relative的容器div，因此即使是绝对div仍然存在。

希望这会有所帮助

:css
  .buttons_inline{
    position: relative;    
  }
  .back_line{
    background-color: coral;
    height:2px;
    position:absolute;
    width:100%;
    top:50%;
  }
  .contain{
    position:relative;
    background-color: lightgray;
    text-align:center;
  }
.contain
  .back_line
  .buttons_inline
    %button button 1
    %button button 2
    %button button 3
    %button button 4

如何创建通过水平线连接的按钮

1 个答案: