Question

嘿伙计们，我需要在选择div中显示来自巴西的所有27个州，我真的需要使用UL来做这个...这是他们应该如何看待的投影： alt text http://img24.imageshack.us/img24/8726/statesf.jpg

这是UL的一部分：你会建议什么？我可以用这个标记吗？

<ul class="ufLista">
                <li>
                    <ul>
                        <li><a href="#" title="AC">AC</a></li>
                        <li><a href="#" title="AL">AL</a></li>
                        <li><a href="#" title="AM">AM</a></li>
                     </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="#" title="CE">CE</a></li>
                        <li><a href="#" title="DF">DF</a></li>
                        <li><a href="#" title="ES">ES</a></li>
                    </ul>
                </li>
                <li>
                    <ul>
                        <li><a href="#" title="MT">MT</a></li>
                        <li><a href="#" title="MS">MS</a></li>
                        <li><a href="#" title="MG">MG</a></li>
                    </ul>
                </li>
             </ul>

Answer 1

这些列表是否必须嵌套？如果它只是一个列表：

<ul>
<li>one</li>
<li>two</li>
<li>three</li>
<li>Four</li>
<li>five</li>
<li>six</li>
<li>seven</li></ul>

然后你可以用它来设置样式：

ul { width: 300px; list-style: none; line-height: normal; }
li { float: left; width: 98px; border: 1px black solid; }

很容易获得'网格'效果。

Answer 2

由于缺少图像，我只能猜测，但标题中的“网格状”表示某种表格布局。您可以将CSS display property设置为某些值，然后应该触发类似于表格的显示：

table，inline-table，table-row-group，table-column，table-column-group，table-header-group，table-footer-group，table-row，table-cell和table-caption < / p>

这些值使元素的行为类似于表元素（受表中章节中描述的限制）。

The CSS Table Model更详细地介绍了这一点。

Answer 3

要以类似网格的方式组织数据，而不是使元素表格像表格一样，请使用<table>。这就是它的发明，它仍然是正确的解决方案。

编辑：正如你需要用LIs做的那样：在表格中表示你的标记应该没问题。给内部<ul> width: 100%, clear: both和overflow: auto。给内部<li> s float: left以及相对或绝对宽度相当于ul的100％。

用ul组织一些内容（看起来像网格状）

3 个答案: