CSS3進度條 - 使用跨度來定義進度

-1

我正在爲這個項目製作一個進度條，我正在努力工作，並且我已經完成了一半，但現在我已經碰到了一堵牆，我可以似乎沒有解決。CSS3進度條 - 使用跨度來定義進度

我得到的問題是，子div不指定父div的寬度。（這樣的跨度不會告訴進度，它應該是60％寬。）

現場演示可以在這裏找到 - http://codepen.io/anon/pen/BoGvvL

<div class="progress-container"> 
    <div class="progressbar"> 
     <span style="width:60%"></span> 
    </div> 
</div>

CSS

* { 
    box-sizing:border-box; 
} 

.progress-container { 
    width:150px; 
    margin:0 auto; 
    background:#CDCDCD; 
    height:30px; 
    border-radius:8px; 
    padding:3px 5px; 
} 
.progressbar { 
    height: 24px; 
    width:0%; 
    max-width:100%; 
    border-radius:8px; 
    background: -webkit-linear-gradient(left, #f63a0f, #f2d31b, #86e01e); 
    background: -o-linear-gradient(right, #f63a0f, #f2d31b, #86e01e); 
    background: -moz-linear-gradient(right, #f63a0f, #f2d31b, #86e01e); 
    background: linear-gradient(to right, #f63a0f, #f2d31b, #86e01e); 
}

有人能告訴我請以正確的方式？

在此先感謝。

來源

2015-11-11 Mo Martin

http://codepen.io/anon/pen/wKQRLJ – m02ph3u5

爲什麼你需要跨度？ http://codepen.io/anon/pen/epQbwj –

容器中任何大小的百分比都會使該大小的元素佔其父項的百分比（給出position: relative，可能還有其他一些我忘記的邊界案例）。

要使用你的例子：

<div class="progress-container"> 
    <div class="progressbar"> 
     <span style="width:60%"></span> 
    </div> 
</div>

的span將是.progressbar60%。這應該是顯而易見的，只需通過「百分比」的定義 - 它是「一定數量的（特別是100，我們已經共同認可的是'全部'）」或在您的具體情況下：「六分之一寬度」。

什麼阻止你把width: 60%放在.progressbar元素上？我在CodePen中做到了這一點，它的工作非常出色。

實施例：

<div class="progress-container"> 
    <div class="progressbar" style="width: 60%"> 
    </div> 
</div>

來源

2015-11-11 18:01:31 rockerest

雖然這樣做確實有效，但它只是將顏色進一步推到一起，這種方式會讓它們失去光明。基本上我想要的是進度條只顯示全部100％寬度的60％，所以它是黃綠色的，不僅僅是綠色。 –

您需要跨度元件的顯示屬性改變爲塊。

您的.progressbar選擇器應該很大，並且沒有應用其他樣式。使用.progressbar跨度代替

SPAN元素inline elements，你不能爲它們分配任何大小！

所以，如果你嘗試這樣的事情......可能它的工作原理！

function updateProgress() { 
 
    var val = document.querySelector('.val').value; 
 
    var el = document.querySelector('.progressbar span'); 
 
    
 
    el.style.width = val + '%'; 
 
    el.innerText = val + '%'; 
 
};

.progressbar { 
 
    background: red; 
 
    width: 100%; 
 
    font-size: 16px; 
 
} 
 

 
.progressbar span { 
 
    display: block; 
 

 
    text-align: center; color: #fff; transition: 300ms width linear; 
 
    line-height: 2em; 
 
    background: green; 
 
    max-width: 100%; 
 
}

<div style="padding: 1em 0;"><input class="val" max="100" type="number" value="10" onchange="updateProgress()"/></div> 
 
<div class="progressbar"> 
 
    <span style="width: 10%;">10%</span> 
 
</div>

來源

2015-11-11 18:08:04 Hitmands

您還可以查看進度條下面的資源：https://css-tricks.com/css3-progress-bars/。如果您有興趣，這可以爲您提供有關進度條和某些模板的詳細信息。

要使用你已經得到了你可以使用以下作爲替代（活代碼在這裏：http://codepen.io/anon/pen/RWqEXW#0）代碼

HTML：

<div class="progress-container"> 
    <span class="progressbar" style="width:60%"> 
    </span> 
</div>

CSS：

* { 
    box-sizing: border-box; 
} 

.progress-container { 
    position: relative; 
    width: 150px; 
    margin: 0 auto; 
    background: #CDCDCD; 
    height: 30px; 
    border-radius: 8px; 
    padding: 3px 5px; 
} 

.progressbar { 
    position: absolute; 
    height: 24px; 
    max-width: 100%; 
    border-radius: 8px; 
    background: -webkit-linear-gradient(left, #f63a0f, #f2d31b, #86e01e); 
    background: -o-linear-gradient(right, #f63a0f, #f2d31b, #86e01e); 
    background: -moz-linear-gradient(right, #f63a0f, #f2d31b, #86e01e); 
    background: linear-gradient(to right, #f63a0f, #f2d31b, #86e01e); 
}

請注意插入位置屬性並刪除進度條中的「寬度：0％」。

祝你好運！

來源

2015-11-11 18:17:46

在代碼中有幾個問題。

首先span不告訴進度條它是60％，因爲.progressbar的寬度爲0（60％X 0 = 0）。

您應該將display:block添加到span，並指定高度。

我編輯了您的代碼並使其按您期望的方式工作。這裏是一個代碼筆：https://codepen.io/anon/pen/YyRBVW

來源

2015-11-11 18:43:28

CSS3進度條 - 使用跨度來定義進度

回答

相關問題