0

我有一个问题，我已将所有元素对齐在一行中。

实际上它应该看起来像这样。在此处输入图像描述

我在创建表格并将每个 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>
4

2 回答 2

3

这应该这样做。

http://jsfiddle.net/5Q9Cv/

我做的主要事情是浮动你所有的项目，我重新排序你的图标在你的 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;
}
于 2013-06-21T20:02:59.007 回答
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;  
}
于 2013-06-21T19:51:21.587 回答