0

我想为我的网站制作一个菜单，我只需要 UL 和 LI 来进行 SEO。它应该看起来像：

<ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
    <li>Link 4</li>
    <li>Link 5</li>
    <li>Link 6</li>
</ul>

每个 li 必须有 1 个链接。水平的。它必须是动态的：如果我更改链接的文本，它必须自动调整（因此理论上不应该使用任何固定宽度<li>）。

在此处输入图像描述

这（或多或少）是布局应该的样子。或多或少是因为我还没有计算对链接的每个块的最大长度大小之间的实际距离。比方说，每个块还剩下 20 像素。

正如你所看到的，链接块之间的距离（有 1px 边框的地方）是不同的，这取决于容器（因此，每对链接的长度）。我不能在不同的内部使用不同ul的元素li，这是主要问题。

知道这是否可能吗？我尝试了很多方法，但我真的不知道如何才能得到它（这是我不知道如何制作的第一个菜单）。

任何输入都会很好......

4

2 回答 2

0

将此添加到您的 CSS 中。

li { float: left; display: block; }

这是 jQuery 解决方案：http: //jsfiddle.net/ADtke/5/

于 2012-04-27T15:41:44.920 回答
0

在受支持的浏览器中，有一种纯 CSS3 方式（可惜我们有这么乱的 -webkit、-moz）

ul { 
  border-left:2px solid #cc0;
  border-right:2px solid #cc0;
  -moz-column-count: 3;
  -moz-column-gap: 5px;
  -webkit-column-count: 3;
  -webkit-column-gap: 5px;
  column-count: 3;
  column-gap: 5px;
  -webkit-column-rule-color: #cc0;
  -webkit-column-rule-style: solid;
  -webkit-column-rule-width: 2px;
  -moz-column-rule-color: #cc0;
  -moz-column-rule-style: solid;
  -moz-column-rule-width: 2px;
  column-rule-color: #cc0;
  column-rule-style: solid;
  column-rule-width: 2px;
}
li {
  white-space:nowrap;
}

就像在这个jsfiddle http://jsfiddle.net/hyxxJ/5/

于 2012-04-27T21:34:23.433 回答