Question

我有一组记录，我用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>

三个列表中有三列。需要双行的元素是第一列的第一列和第三列，第二列的第三列。我认为解决方案是将新类应用于那些特定的列表元素，但是我无法找到任何使列表元素成为固定行数的内容。建议？

Answer 1

我查看了类似高度的内容，发现将文本放入div，将max-height放在其上并关闭overflow的组合对我来说很有用

Answer 2

潜在的解决方案是使用EM作为高度，因为EM单位基于字体大小。

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

通过将LI的高度设置为2em，您可以有效地将高度设置为24px或两行高度。也就是说，这没有考虑行高，如果我们有一个15px的线高，那就是每行额外空间3px总共6,24 + 6 = 30 = 2.5em

使用CSS制作<li>两行高？</li>

2 个答案: