我有一个 ul ,其li分别包含8个div,每个div的宽度应相同。
在CSS中,我将宽度定义为计算出的百分比。
#csaReportBody div{
display:inline-block;
width:calc( 100% / 8.45 );
padding:1px;
font-size:.8em;
height:19px;
border-left:1pt solid red; /* added to see where the columns were */
}
奇怪的是,即使浏览器“认为”它们的宽度相同,也不会以这种方式显示。例如:
当我将鼠标悬停在div上时,您可以在图片中看到,它为我提供了每个指标完全相同的度量(132.52 x 21-它们都显示相同),但是在第8个指标中,每行的底行稍窄李行中的divs。
完整的HTML如下所示:
#csaReportBody {
list-style: none;
padding: 0;
width: 100%;
}
#csaReportBody li:first-child {
border-bottom: 1pt solid #ccc;
}
#csaReportBody li:nth-child(2n+2) {
background: #fff;
}
#csaReportBody div {
display: inline-block;
width: calc( 100% / 8.45);
padding: 1px;
font-size: .8em;
height: 19px;
border-left: 1pt solid red;
}
<ul id="csaReportBody">
<li id="csaTitle">
<div class="csaDiv boldCtr">ID</div>
<div class="csaDiv boldCtr">Aggl.<sup>1</sup>
</div>
<div class="csaDiv boldCtr">Total Motility %</div>
<div class="csaDiv boldCtr">Volume (mL)</div>
<div class="csaDiv boldCtr">Concentration (M/mL)</div>
<div class="csaDiv boldCtr">Total Sperm Dose (billions)</div>
<div class="csaDiv boldCtr">Intact Acrosomes - Viable %, Flow Cytometry</div>
<div class="csaDiv boldCtr">Target <input type="checkbox" id="csaShowTarget"></div>
</li>
<li class="csaData">
<div class="csaDiv csaSAMPLEID" data-sid="G005-166-850">G005-166-850 <img src="images/cross.png"></div>
<div class="csaDiv csaAGGL ctr">Mild</div>
<div class="csaDiv csaTM ctr">85</div>
<div class="csaDiv csaV ctr">68.8</div>
<div class="csaDiv csaC ctr">46.75</div>
<div class="csaDiv csaTSD ctr">3.22</div>
<div class="csaDiv csaIAVFC ctr">NR</div>
<div class="csaDiv csaTAR tarStat ctr">NP</div>
</li>
<li class="csaData">
<div class="csaDiv csaSAMPLEID" data-sid="G005-166-854">G005-166-854 <img src="images/cross.png"></div>
<div class="csaDiv csaAGGL ctr">Mild</div>
<div class="csaDiv csaTM ctr">92</div>
<div class="csaDiv csaV ctr">71.2</div>
<div class="csaDiv csaC ctr">51.50</div>
<div class="csaDiv csaTSD ctr">3.67</div>
<div class="csaDiv csaIAVFC ctr">NR</div>
<div class="csaDiv csaTAR tarStat ctr">NP</div>
</li>
<li class="csaData">
<div class="csaDiv csaSAMPLEID" data-sid="G005-166-852">G005-166-852 <img src="images/cross.png"></div>
<div class="csaDiv csaAGGL ctr">Mild</div>
<div class="csaDiv csaTM ctr">91</div>
<div class="csaDiv csaV ctr">68.2</div>
<div class="csaDiv csaC ctr">54.25</div>
<div class="csaDiv csaTSD ctr">3.70</div>
<div class="csaDiv csaIAVFC ctr">NR</div>
<div class="csaDiv csaTAR tarStat ctr">NP</div>
</li>
<li class="csaData">
<div class="csaDiv csaSAMPLEID" data-sid="G005-166-853">G005-166-853 <img src="images/cross.png">
<img src="images/a.png"></div>
<div class="csaDiv csaAGGL ctr">Mild</div>
<div class="csaDiv csaTM ctr">93</div>
<div class="csaDiv csaV ctr">69.1</div>
<div class="csaDiv csaC ctr">44.50</div>
<div class="csaDiv csaTSD ctr">3.07</div>
<div class="csaDiv csaIAVFC ctr">NR</div>
<div class="csaDiv csaTAR tarStat ctr">NP</div>
</li>
<li class="csaData">
<div class="csaDiv csaSAMPLEID" data-sid="G005-166-851">G005-166-851 <img src="images/cross.png"></div>
<div class="csaDiv csaAGGL ctr">Mild</div>
<div class="csaDiv csaTM ctr">86</div>
<div class="csaDiv csaV ctr">67.6</div>
<div class="csaDiv csaC ctr">50.75</div>
<div class="csaDiv csaTSD ctr">3.43</div>
<div class="csaDiv csaIAVFC ctr">NR</div>
<div class="csaDiv csaTAR tarStat ctr">NP</div>
</li>
<li class="csaMean">
<div class="csaDiv"></div>
<div class="csaDiv ctr">MEAN</div>
<div class="csaDiv ctr">89</div>
<div class="csaDiv ctr">69.0</div>
<div class="csaDiv ctr">49.55</div>
<div class="csaDiv ctr">3.42</div>
<div class="csaDiv ctr">-</div>
<div class="csaDiv tarStat csaTAR ctr">-</div>
</li>
</ul>
生成数据,并在显示数据后,计算“ MEAN”行并将其附加到ul。
我的问题是:如果第一列正确地左对齐,并且所有div的宽度相同,为什么它们不对齐?
答案 0 :(得分:2)
如果您显示 ALL 类的CSS将会很有帮助,因为这就是问题所在。但是由于尚未完成(还),以下提示可能会帮助您对其进行调试:
首先,本着更清洁的精神,对所有这些使用<table>
标签,然后添加行和列,而不是在其中添加<div>
元素,将更加有意义。 <li>
个元素可以做同样的事情。第一个原因是因为它更具语义。第二个原因是因为默认情况下,<div>
是一个块元素,因此您必须像以前一样display: inline-block;
或inline
,以免它显得怪异。尽管如此,假设出于某种原因您需要那样的东西。
考虑到上述情况,您的第一行继承自ID csaTitle
。之后,您的每一行都继承自类csaData
,到目前为止,所有这些行均已正确对齐。 但是您的最后一行继承自类csaMean
。
从到目前为止的情况来看,我最好的选择是,您的问题出在该班级上。