[英]Align all HTML elements in One Line Horizontally
我有一個問題,我將所有元素對齊在一行中。
實際上,它應該看起來像這樣。
我是在創建表並將每個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>
這應該做。
我要做的主要事情是浮動所有剩余的項目,然后我重新排序了HTML中您的圖標的位置,以使其位於進度欄之前。 我0進度條本身上的所有頁邊空白。 我還將“塊”的高度設置為容器的高度,並將塊周圍的邊框更改為僅具有右邊框。 這樣,任何地方都不會出現雙重邊界。
您可能需要稍微弄些寬度來調整它們以適應您的需求……只要確保您不要使寬度太小,否則您會破壞它,進度條將落到下一行。 (基本上算一下)
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;
}
試試看: 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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.