ширина div внутри li не выравнивается

Question

У меня есть ul , каждый из которых содержит 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 div в ряду li.

полный 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.

Мой вопросis: Если первый столбец правильно выровнен по левому краю, и все div имеют одинаковую ширину, почему они не выровнены?

Answer 1

Было бы очень полезно, если бы вы показали ALL css для ваших классов, потому что именно здесь возникает проблема.Но поскольку вы еще этого не сделали (пока) , следующие советы могут помочь вам отладить его:

1. Во-первых, в духе повышения чистоты,было бы гораздо разумнее использовать тег <table> для всего этого, а затем добавить строки и столбцы вместо элементов <div> внутри элементов <li>, чтобы сделать то же самое.Первая причина в том, что это более семантически.Вторая причина заключается в том, что по умолчанию <div> является блочным элементом, поэтому вы должны display: inline-block; или inline, как вы это делали, чтобы он не отображался как вонючий.Тем не менее, предположим, что вам по какой-то причине это нужно.

2. С учетом вышесказанного, ваша первая строка наследуется от идентификатора csaTitle.После этого каждая из ваших строк наследуется от класса csaData, и все они до сих пор правильно выровнены. Но ваш последний ряд унаследован от класса csaMean.

Судя по тому, что вы пока показали, моя лучшая ставка в том, что ваша проблемалежит в этом классе.