0
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;
}
}
誰もが、私はこれを達成する方法上の任意のアイデアがありますか?