li内的div宽度未对齐

时间:2018-10-10 20:14:06

标签: html css html-lists

我有一个 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 */
}

奇怪的是,即使浏览器“认为”它们的宽度相同,也不会以这种方式显示。例如:

enter image description here

enter image description here

当我将鼠标悬停在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的宽度相同,为什么它们不对齐?

1 个答案:

答案 0 :(得分:2)

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

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

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

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