Question

我想将HTML无序列表设置为看起来像网格。期望的结果是这样的：

我有以下HTML：

<ul class="grid">
  <li>First item. This is sometimes longer than the second item.</li>
  <li>2nd item</li>
  <li class="reset">Third item</li>
  <li>Fourth item</li>
</ul>

由以下CSS设计：

ul.grid {
  /* Remove standard browser list styles */
  list-style:none;
  margin:0;
  padding:0;

  /* Add specific styles */
  width:13.5em; /* Clear internal floats (IE) */
  overflow:hidden; /* Clear internal floats (proper browsers) */
  background-color:#f00;
  border-bottom:0.5em solid #f00;
}

ul.grid li {
  display:inline; /* IE6 double margin float bug fix */
  width:5em;
  float:left;
  padding:0.5em;
  margin-left:0.5em;
  border-top:0.5em solid #f00;
  padding-bottom:1000.5em; /* } Balance height of items */
  margin-bottom:-1000em;   /* } */
  background-color:#fff;
}

ul.grid li.reset {
  clear:left;
}

在Firefox，Safari等中根据需要呈现。然而，在IE 6中，清算不会以相同的方式影响后续元素：

_{（来源：georgebrock.com）}

您可以在此处查看实时示例代码：http://georgebrock.com/misc/css-grid/

有什么想法吗？

Answer 1

我更喜欢使用表格，但如果你不能（例如，CMS或第三方正在向您推送此标记）。

如果这不是一个选项，我会尝试使用javascript检查DOM以确定2个LI的最大高度，然后将另一个设置为该最大值。

jQuery等图书馆可以为此提供帮助看到： Getting actual height of an auto-heighted element in IE

Answer 2

问题很老，但有趣。找不到IE6，但IE7中存在同样的问题。对此没有真正的解决方案，但在IE7中可以通过使用宽度和使用Adjacent Sibling（+）组合器来实现。对于IE6，每个列表元素都必须具有新类。所以，不是真正的网格，而是looks like a grid：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Test case: CSS grids</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <style type="text/css" media="screen">
            ul.grid {
                /* Remove standard browser list styles */
                list-style: none;
                margin: 0;
                padding: 0;

                /* Add specific styles */
                width: 220px; /* Clear internal floats (IE) */
                overflow: hidden; /* Clear internal floats (proper browsers) */
                border-bottom: 1px solid red;
            }

            ul.grid li {
                display: inline; /* IE6 double margin float bug fix */
                float: left;
                border: 1px solid red;
                padding: 5px;
                padding-bottom:1000.5em; /* } Balance height of items */
                margin-bottom:-1000em; /* } */
            }
            ul.grid li.reset {
                clear:left;
            }
            ul.grid li {
                width: 98px;
                border-left: 1px solid red;
                border-right: 1px solid red;
                padding-left: 5px;
            }
            ul.grid li + li {
                width: 98px;
                border-left: 1px solid red;
                border-right: 1px solid red;
                padding-left: 5px;
            }
            ul.grid li + li + li {
                width: 97px;
                border-left: 1px solid red;
                border-right: 0 none;
                padding-left: 5px;
            }
            ul.grid li + li + li + li {
                padding-left: 9px;
                border-left: 0 none;
                border-right: 1px solid red;
            }
            ul.grid li + li + li + li + li {
                width: 98px;
                border-left: 1px solid red;
                border-right: 1px solid red;
                padding-left: 5px;
            }
            ul.grid li + li + li + li + li + li {
                width: 98px;
                border-left: 1px solid red;
                border-right: 1px solid red;
                padding-left: 5px;
            }
            ul.grid li + li + li + li + li + li + li {
                width: 97px;
                border-left: 1px solid red;
                border-right: 0 none;
                padding-left: 5px;
            }
            ul.grid li + li + li + li + li + li + li + li {
                padding-left: 9px;
                border-left: 0 none;
                border-right: 1px solid red;
            }
            ul.grid li + li + li + li + li + li + li + li + li {
                width: 98px;
                border-left: 1px solid red;
                border-right: 1px solid red;
                padding-left: 5px;
            }
            ul.grid li + li + li + li + li + li + li + li + li + li {
                width: 98px;
                border-left: 1px solid red;
                border-right: 1px solid red;
                padding-left: 5px;
            }
        </style>
    </head>

    <body>

        <ul class="grid">
            <li class="reset">First item. This is sometimes longer than the second item.</li>
            <li>2nd item</li>
            <li class="reset">Third item</li>
            <li>Fourth item</li>
            <li class="reset">Fifth item</li>
            <li>Sixth item is maybe longer for a line.</li>
            <li class="reset">7th item</li>
            <li>Eight item is again longer</li>
            <li class="reset">9th item. This is sometimes longer than other.</li>
            <li>Tenth item</li>
        </ul>

    </body>
</html>

如何从无序列表创建IE6兼容的网格布局？

2 个答案: