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

嗨，大家好，我需要在选择div中显示来自巴西的所有27个状态，我真的需要使用UL来完成它..这是他们应该如何进行的投影看： alt text http://img24.imageshack.us/img24/8726/statesf.jpg 用ul组织一些内容（看起来像网格一样）

而这是一个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>

来源

2009-12-11 Vitor Reis

您的图片缺失。 – Joey 2009-12-11 16:29:41

是否有这些列表嵌套的必要性？如果这只是一个列表，如：

<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; }

，并很容易地得到一个“网格”的效果。

来源

2009-12-11 16:47:02 Erik

由于图像丢失，我只能猜测，但“网格状”的标题所暗示某种表格布局。您可以将CSS display property设置，然后将引发类似表格显示某些值：

表，内联表，表行组，表列，表列组，表，报头 - 组表，表格行，表格单元格和表格说明

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

此进行更详细的描述The CSS Table Model。

来源

2009-12-11 16:32:08 Joey

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

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

来源

2009-12-11 16:51:40

我不害怕像大多数新的“Web 2.0设计师”那样使用表格，事实是，我试图修复已经存在的东西，它需要成为一个列表 – 2009-12-11 17:12:28

啊，我看到了。 ----- – 2009-12-11 17:14:50

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

回答

相关问题