水平對齊所有HTML元素

Question

我有一個問題，我已將所有元素排列在一行中。

其實它應該是這樣的。

我在創建表格的幫助下創建了這個表格，並將每個ProgressBar作爲Div ELements添加到表格單元格中。由於某種原因，這是不工作在IE 7中。

所以，我想創建使用div元素的html沒有任何表。現在，它看起來像這樣：

能否請你告訴我，我缺少的是什麼？

這裏是CSS代碼：

div.coverage-container { 
    border: 1px solid rgba(0, 0, 0, 0.13); 
    width:370px; 
    height:30px; 
} 

div.progressbar-content{ 
width: 95px;  
text-align: center; 
float:left; 
border: 1px solid rgba(0, 0, 0, 0.13); 
} 


div.progressbar-maindiv { 
background-color: #DAE2E3; 
border-radius: 13px 13px 13px 13px;  
margin: 3px -9px 3px 114px; 
padding: 3px; 
width: 75px; 
float:left; 
} 


.progressbar-percentage { 
background-color: #F23F54; 
border-radius: 15px 15px 15px 15px; 
height: 15px; 
width: 80.00%; 
} 

.progressbar-chart-icon {  margin-right: 5px; float:right;  text-align: center;  } 

下面是HTML代碼：

<div class="coverage-container"> 
<div class="progressbar-content"> 
    <div class="progressbar-maindiv"> 
     <div class="progressbar-percentage"> 
      <center>80%</center> 
     </div> 

    </div> 
    <img width="21" height="21" title="Get Trends" src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" />    
</div> 

<div class="progressbar-content"> 
    <div class="progressbar-maindiv"> 
     <div class="progressbar-percentage"> 
      <center>80%</center> 
     </div> 
    </div> 
    <img width="21" height="21" title="Get Trends" src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon"> 
</div> 

<div class="progressbar-content"> 
    <div class="progressbar-maindiv"> 
     <div class="progressbar-percentage"> 
      <center>80%</center> 
     </div> 
    </div> 
    <img width="21" height="21" title="Get Trends" src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon"> 
</div> 

</div> 

Answer 1

這應該這樣做。

http://jsfiddle.net/5Q9Cv/

我做的主要事情是浮動所有離開項目，我重新排序，其中的圖標是在你的HTML來你的進度欄前。我將進度條本身的所有空白空間都清空了。我還將「塊」的高度設置爲容器的高度，並將塊周圍的邊框更改爲剛好具有邊框的權限。這種方式在任何地方都沒有雙重邊框。

你會想把寬度弄亂一點來調整它們以滿足你的需要...只要確保你不要使寬度太小，否則你會打破它，進度條會掉到下一行。 （做你的數學基本）

HTML：

<div class="coverage-container"> 

<div class="progressbar-content"> 

    <img width="21" height="21" title="Get Trends" src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" />  
    <div class="progressbar-maindiv"> 
     <div class="progressbar-percentage"> 
      <center>80%</center> 
     </div> 
    </div> 

</div><!-- END BLOCK --> 

<div class="progressbar-content"> 

    <img width="21" height="21" title="Get Trends" src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" />  
    <div class="progressbar-maindiv"> 
     <div class="progressbar-percentage"> 
      <center>80%</center> 
     </div> 
    </div> 

</div><!-- END BLOCK --> 

<div class="progressbar-content"> 

    <img width="21" height="21" title="Get Trends" src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" />  
    <div class="progressbar-maindiv"> 
     <div class="progressbar-percentage"> 
      <center>80%</center> 
     </div> 
    </div> 

</div><!-- END BLOCK --> 


</div> 

CSS：

div.coverage-container { 
    border: 1px solid rgba(0, 0, 0, 0.13); 
    width:370px; 
    height:30px; 
    overflow: visible; 
    clear: both; 
} 

div.progressbar-content { 
    width: 120px; 
    height: 30px; 
    text-align: center; 
    float:left; 
    border-right: 1px solid rgba(0, 0, 0, 0.13); 
} 


div.progressbar-maindiv { 
    background-color: #DAE2E3; 
    border-radius: 13px 13px 13px 13px;  
    margin: 0; 
    padding: 3px; 
    width: 75px; 
    float:left; 
} 


.progressbar-percentage { 
    background-color: #F23F54; 
    border-radius: 15px 15px 15px 15px; 
    height: 15px; 
    width: 80.00%; 
} 

.progressbar-chart-icon { 
    margin-right: 5px; 
    float: left; 
    text-align: center; 
} 

Answer 2

試試這個：http://jsfiddle.net/derekstory/RKADY/

HTML

<div class="coverage-container"> 
    <div class="progressbar-content"> 
     <img width="21" height="21" title="Get Trends" src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" /> 
     <div class="progressbar-maindiv"> 
      <div class="progressbar-percentage"> 
       <center>80%</center> 
      </div> 
     </div> 
      <img width="21" height="21" title="Get Trends" src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" /> 
     <div class="progressbar-maindiv"> 
      <div class="progressbar-percentage"> 
       <center>80%</center> 
      </div> 
     </div> 
       <img width="21" height="21" title="Get Trends" src="http:/localhost/newccft2/Content/images/chart-graph-icon.png" class="progressbar-chart-icon" /> 
     <div class="progressbar-maindiv"> 
      <div class="progressbar-percentage"> 
       <center>80%</center> 
      </div> 
     </div> 
</div> 

CSS

div.coverage-container { 
    border: 1px solid rgba(0, 0, 0, 0.13); 
    width:700px; 
    height:30px; 
    display: inline-block; 
} 
div.progressbar-content { 
    width: 95px; 
    text-align: center; 
    border: 1px solid rgba(0, 0, 0, 0.13); 
    display: inline; 

} 
div.progressbar-maindiv { 
    background-color: #DAE2E3; 
    border-radius: 13px 13px 13px 13px; 
    margin: 3px 9px 20px -10px; 
    padding: 3px; 
    width: 75px; 
    float: left; 
} 
.progressbar-percentage { 
    background-color: #F23F54; 
    border-radius: 15px 15px 15px 15px; 
    height: 15px; 
    width: 80.00%; 

} 
.progressbar-chart-icon { 
    margin-right: 5px; 
    float:left; 
    text-align: center; 
}