CSS設置元素的寬度

-3

我試圖將元素progress的寬度設置爲兩個其他元素之間的寬度。下面是HTML代碼我使用CSS設置元素的寬度

 <span class="current_rank"><?php echo $this->current_rank;?></span> 
     <div class="progress"> 
     <div class="progress-bar" role="progressbar"></div> 
     </div> 
     <span class="next_rank"><?php echo $this->next_rank;?></span>

我試圖讓進度條的寬度是兩個<span>'s 之間的寬度這是可能的CSS？

更新

.progress { 
    width: 550px; 
    height: 15px; 
    margin-bottom: 10px; 
    overflow: hidden; 
    background-color: #666; 
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); 
} 

.progress-bar { 
    width: 0; 
    height: 100%; 
    font-size: 12px; 
    line-height: 15px; 
    color: #333; 
    text-align: center; 
    background-color: #ffd700; 
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 
      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); 
    -webkit-transition: width 0.6s ease; 
      transition: width 0.6s ease; 
} 

.VIP_ranking > .current_rank { 
    margin-left: 30px; 
    margin-right: 25px; 
} 

.VIP_ranking > .next_rank { 
    float: right; 
    margin-right: 22.5px; 
} 

.VIP_ranking > div.progress{ 
    position:absolute; 
    display:inline; 
    margin-left: 10px; 
}

來源

2014-06-10 Huludini

你需要顯示你已經嘗試過。我建議發佈您的CSS樣式 – Leo

添加CSS到原始帖子 – Huludini

所有這些CSS看起來與我無關。 VIP_ranking類是在你的標記中指定的。雖然'current_rank'和'next_rank'沒有在你的CSS中指定！ – Leo

有好幾只CSS的解決方案，但它實際上取決於什麼要求，在瀏覽器的兼容性方面。

CSS計算函數 - 如果知道跨度元素的寬度，可以使用它，不管是絕對寬度還是以百分比表示的寬度。例如：width：calc（100％ - 200px）或calc（80％）。此解決方案將在IE9 +，Chrome和FF中工作使用display：flex;併爲您的內容辯護。你可以閱讀更多關於它here。您不需要知道跨度的寬度，但此解決方案只能在IE10 +，Chrome和FF中兼容。

來源

2014-06-10 01:10:46 sagibb

我搞砸了一下，它的工作！謝謝！我結束了使用'display：flex;' – Huludini

CSS設置元素的寬度

回答

相關問題