第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

僅使用 CSS 的響應(yīng)式步進(jìn)器

僅使用 CSS 的響應(yīng)式步進(jìn)器

我想制作一個支持任何數(shù)字的響應(yīng)式步進(jìn)器。我嘗試過這個（請參閱下面的代碼片段）。不知何故，4 是適合此腳本的所需數(shù)量，任何大于或小于 4 的值都會變得混亂。參考這個jsfiddle看看，只需3步。有誰知道如何解決這一問題？我需要幫助。提前致謝！#stepProgressBar {  display: flex;  justify-content: space-between;  align-items: flex-end;  width: 90%;  margin: 0 auto;  margin-bottom: 40px;}.step {  text-align: center;  width: 20%;  position: relative;}.step-text {  margin-bottom: 10px;  color: #000;}.bullet {  border: 1px solid #000;  height: 20px;  width: 20px;  color: #000;  display: inline-block;  transition: background-color 500ms;  line-height: 20px;}.bullet.completed {  color: white;  background-color: #000;}.bullet.completed::after {  content: '';  position: absolute;  bottom: 10px;  height: 1px;  width: calc(133% - 21px);  background-color: #000;  margin-left: 7px;  }/* Base styles and helper stuff */.hidden {  display: none;}button {  padding: 5px 10px;  border: 1px solid black;  transition: 250ms background-color;}button:hover {  cursor: pointer;  background-color: black;  color: white;}button:disabled:hover {  opacity: 0.6;  cursor: not-allowed;}.text-center {  text-align: center;}.container {  max-width: 100%;  margin: 0 auto;  margin-top: 20px;  padding: 40px;}
查看完整描述

2 回答

?
牧羊人nacy

TA貢獻(xiàn)1862條經(jīng)驗(yàn) 獲得超7個贊

仍然不確定你的期望是什么......所以我用<label>s 和隱藏的復(fù)選框做了一個 4 步 Whatchamacallit。向前單擊它們，它們就會發(fā)生變化。如果向后走，則需要按順序進(jìn)行。做出這種行為是為了不存在任何間隙。

這種純 CSS 動態(tài)行為可以通過以下方式實(shí)現(xiàn)：

  • 通用兄弟組合器

  • 標(biāo)簽標(biāo)簽[for]屬性

  • :checkedCSS偽類

  • justify-content: space-between;

演示

:root,

body {

? width: 100%;

? height: 100%;

? padding: 20px 10px;

? font: 400 5vw/1 Consolas, monospace;

}


main {

? display: flex;

? justify-content: start;

? align-items: center;

? overflow: hidden;

? margin: 0 30px 0 -30px;

}


.box {

? display: flex;

? flex-flow: row nowrap;

? justify-content: space-between;

? align-items: center;

? width: 90%;

? height: 5vw;

? line-height: 1;

? margin: 0 auto;

? padding: 0;

? background: linear-gradient(180deg, rgba(255, 255, 255, 0) calc(50% - 1px), rgba(0, 0, 0, 1) calc(50%), rgba(255, 255, 255, 0) calc(50% + 1px));

}


.s {

? position: relative;

? display: inline-block;

? width: 5vw;

? height: 5vw;

? margin: 0;

? padding: 0;

? color: #000;

? background: #fff;

? outline: 2px solid #000;

? text-align: center;

}


#s1 {

? align-self: start;

? order: 4;

}


#s2 {

? order: 3;

}


#s3 {

? order: 2;

}


#s4 {

? align-self: end;

? order: 1;

}


.c {

? display: none;

}


.c:checked~.s {

? color: #fff;

? background: #000;

}


.c,

.s {

? cursor: pointer;

}

<main>

? <section class='box'>

? ? <input id='c1' class='c' type='checkbox'>

? ? <label id='s1' class='s' for='c1'>4</label>

? ? <input id='c2' class='c' type='checkbox'>

? ? <label id='s2' class='s' for='c2'>3</label>

? ? <input id='c3' class='c' type='checkbox'>

? ? <label id='s3' class='s' for='c3'>2</label>

? ? <input id='c4' class='c' type='checkbox'>

? ? <label id='s4' class='s' for='c4'>1</label>

? </section>

</main>


查看完整回答
反對 回復(fù) 2024-01-03
?
慕后森

TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個贊

對于三個項目，您需要更改.bullet.completed::after width為calc(200% - 21px);。根據(jù)項目數(shù)量更改父級的類：https://jsfiddle.net/bortao/buw28o53/


查看完整回答
反對 回復(fù) 2024-01-03
  • 2 回答
  • 0 關(guān)注
  • 204 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號