使用CSS制作<两排高

本文关键字:两排 CSS 制作 使用 | 更新日期: 2023-09-27 18:04:06

我有一组记录,我用formview显示,然后每次浏览一个。其中一些字段的长度变化很大,并且经常导致字段换行到第二行。当前,当您翻页记录时,表单视图的视觉外观会根据这些字段的长度而变化,而换行会导致页面依次变高或变短。我不太喜欢改变页面尺寸,所以我想修复这个问题。

下面是我目前的css:

.CommitmentInfo
{
  margin: 0px;
  padding: 0px;
  vertical-align: middle;
  text-align: left;
  float:left;
  list-style:none;
}
    .CommitmentInfo li
    {
      width: 300px;
    }
    .CommitmentInfo li.b
    {
      width: 150px;
    }

使用的代码:

<ol class="CommitmentInfo">
  <li><asp:Label runat="server" Text='<%# "<b>Vendor Name:</b>" + 
      Eval("ven_name") %>' /></li>
  <li><asp:Label runat="server" Text='<%# "<b>Stock Item:</b>" + 
      Eval("cmt_stock_code") %>' /></li>
  <li><asp:Label runat="server" Text='<%# "<b>Item Description:</b>" +
      Eval("inv_description") %>' /></li>
</ol>
<ol class="CommitmentInfo">
  <li><asp:Label runat="server" Text='<%# "<b>Agent Name:</b>" + 
      Eval("cmt_agent") %>' /></li>
  <li><asp:Label runat="server" Text='<%# "<b>Sales Rep:</b>" + 
      Eval("slm_name") %>' /></li>
  <li><asp:Label runat="server" Text='<%# "<b>Documentation:</b>" +
      GetDocument(Eval("doc_description"), Eval("cmt_document")) %>' /></li>
</ol>
<ol class="CommitmentInfo">                    
  <li class="b"><asp:Label runat="server" Text='<%# "<b>Qty Changed:</b>" + 
      Eval("cmt_changed", "{0:d}") %>' /></li>
  <li class="b"><asp:Label runat="server" Text='<%# "<b>Last Update:</b>" + 
      Eval("cmt_added", "{0:d}") %>' /></li>  
</ol>

三个列表中有三个列。需要双行的元素是第一列的第一个和第三个,以及第二列的第三个。我认为解决方案是将一个新类应用于这些特定的列表元素,但我还没有找到任何使列表元素具有固定行数的方法。建议吗?

使用CSS制作<两排高

我对高度进行了类似的研究,发现将文本放入div,将max-height放在上面并将overflow关闭的组合对我来说很有效。

一个可能的解决方案是使用EM作为高度,因为EM单位是基于字体大小的。

所以这里的理论是,如果你有一行文本,字体大小为12px高,那么1em = 12px。

通过设置LI的高度为2em,你有效地使高度24px,或两行值的高度。也就是说,这并没有考虑到行高,如果我们的行高是15px,那就是每行3px的额外空间总共是624 +6=30=2.5em