li内的div宽度未对齐

Question

我有一个 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的宽度相同，为什么它们不对齐？

Answer 1

如果您显示 ALL 类的CSS将会很有帮助，因为这就是问题所在。但是由于尚未完成（还），以下提示可能会帮助您对其进行调试：

1. 首先，本着更清洁的精神，对所有这些使用<table>标签，然后添加行和列，而不是在其中添加<div>元素，将更加有意义。 <li>个元素可以做同样的事情。第一个原因是因为它更具语义。第二个原因是因为默认情况下，<div>是一个块元素，因此您必须像以前一样display: inline-block;或inline，以免它显得怪异。尽管如此，假设出于某种原因您需要那样的东西。

2. 考虑到上述情况，您的第一行继承自ID csaTitle。之后，您的每一行都继承自类csaData，到目前为止，所有这些行均已正确对齐。 但是您的最后一行继承自类csaMean 。

从到目前为止的情况来看，我最好的选择是，您的问题出在该班级上。