水平線で接続されたボタンを作成する方法

Question

Ruby on Rails Webアプリケーションがあります。フロントエンドのために、私はハムとサスを使用しています。ですから、基本的には、一連のボタンがあり、そのボタンを横切る直線を作成したいのです。私は、ボタンの後ろに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コード、私はあなたがこのようなものを探していたと信じています。 キーポイントposition: absolute

ボタングループのdivが最後position:relativeまたは絶対（絶対の場合、あなたはZインデックスを調整する必要がある場合があります）

可能で

• ライン事業部は、ボタングループのdivの前にする必要があります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 

を役に立てば幸い