html - li 内部的 div 宽度不对齐

Question

我有一个 ul，它的 li 每个包含 8 个 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 个中的每一个上都略窄li 行中的 div。

完整的 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>是一个 block 元素，所以你必须 display: inline-block; , 或 inline像你一样，因为它不会出现不稳定。尽管如此，假设您出于某种原因需要它。

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

从您目前所展示的内容来看，我认为您的问题出在该类上。