我有一个问题,我已将所有元素排成一行。
实际上它应该是这样的。
我在创建表格的帮助下创建了这个,并在表格单元格中添加了每个ProgressBar作为Div ELements。出于某种原因,这在IE 7中不起作用。
所以,我想在没有任何表格的情况下单独使用Div Elements创建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>
答案 0 :(得分:3)
这应该这样做。
我做的主要事情是将你剩下的所有物品都浮起来,然后我重新订购你的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;
}
答案 1 :(得分: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;
}