0

给定标记类似于：

<h1 id="Menu1Title">Menu1</h1>
<nav id="Menu1">
    <a>Item1-1</a>
    <a>Item1-2</a>
    <a>Item1-3</a>
</nav>

<h1 id="Menu2Title">Menu2</h1>
<nav id="Menu2">
    <a>Item2-1</a>
    <a>Item2-2</a>
    <a>Item2-3</a>
</nav>

<h1 id="Menu3Title">Menu3</h1>
<nav id="Menu3">
    <a>Item3-1</a>
    <a>Item3-2</a>
    <a>Item3-3</a>
</nav>

如何仅使用 CSS 实现此演示文稿？

Menu1  Menu2  Menu3
Item1-1
Item1-2
Item1-3
Item2-1
Item2-2
Item2-3
Item3-1
Item3-2
Item3-3

也可以使用 UL，只要它们是三个独立的元素而不是彼此的子列表。我不希望使用绝对定位，因为在此下方还有其他内容应该围绕上面的标记流动。我也不需要旧的 IE hack；仅支持 IE9 和现代浏览器。

这甚至可能吗？谢谢！

编辑...上面的格式问题是为移动设备设计的。非移动显示如下，这就是为什么我希望有一个不需要标记更改的纯 CSS 解决方案。

Menu1
Item1-1 
Item1-2 
Item1-3 

Menu2
Item2-1 
Item2-2 
Item2-3 

Menu3 
Item3-1 
Item3-2 
Item3-3
4

2 回答 2

1

好的，如果你真的不能改变标记或使用 jQuery 来改变标记，那么下面是一个 CSS 唯一的解决方案：

http://jsfiddle.net/wSLEb/

您可以绝对定位标题并给出第一个 ul 边距顶部。然后使用:nth-of-type伪类选择器，您可以定位单个标题并为它们提供更多左侧定位，以将它们推过页面并彼此远离。

它不是很灵活，因为您必须对左侧定位进行硬编码，因此请考虑标题的宽度如何在移动屏幕上呈现。

标记将是：

<h1 id="Menu1Title" class="header">Menu1</h1>
<nav id="Menu1">
<ul class="first">
<li><a>Item1-1</a></li>
<li><a>Item1-2</a></li>
<li><a>Item1-3</a></li>
</ul>
</nav>
<h1 id="Menu2Title" class="header">Menu2</h1>
<nav id="Menu2">
<ul>
<li><a>Item2-1</a></li>
<li><a>Item2-2</a></li>
<li><a>Item2-3</a></li>
</ul>
</nav>
<h1 id="Menu3Title" class="header">Menu3</h1>
<nav id="Menu3">
<ul>
<li><a>Item3-1</a></li>
<li><a>Item3-2</a></li>
<li><a>Item3-3</a></li>
</ul>
</nav>

和 CSS 将是：

.header {
   position: absolute;
    top: 0;
    left:0;
}
.header:nth-of-type(2) {
    left:50px;
}
.header:nth-of-type(3) {
    left:100px;
}
ul {
    list-style: none;
    margin:0;
    padding:0;
}
ul.first {
 margin-top: 20px;
}

您可以在 Chris Coyier 的网站上阅读更多关于伪类选择器的信息：http: //css-tricks.com/pseudo-class-selectors/

祝你好运

于 2012-05-30T18:56:05.820 回答
0

开始你的列表应该在 uls 中。

如果您不能使用绝对定位，那么您需要更改标记以实现这种样式。标题应在 html 中一个接一个地出现。如果您无法在源代码处更改标记，那么您将不得不使用 jQuery 在页面加载时重新排序标记。

在您的 jQuery 中，我将定位所有标头，然后删除除第一个以外的所有标头，然后在第一个标头之后插入这些已删除的标头，然后在最后一个标头之后放置一个清除 div。

请参阅此或下面的代码：http: //jsfiddle.net/wSLEb/

你的标记会变成这样：

<h1 id="Menu1Title" class="header">Menu1</h1>
<h1 id="Menu2Title" class="header">Menu2</h1>
<h1 id="Menu3Title" class="header">Menu3</h1>
<div class="clear"></div> <!--clearing div added to move first ul under the headers-->
<nav id="Menu1">
<ul>

<li><a>Item1-1</a></li>
<li><a>Item1-2</a></li>
<li><a>Item1-3</a></li>
</ul>
</nav>
<nav id="Menu2">
<ul>
<li><a>Item2-1</a></li>
<li><a>Item2-2</a></li>
<li><a>Item2-3</a></li>
</ul>
</nav>
<nav id="Menu3">
<ul>
<li><a>Item3-1</a></li>
<li><a>Item3-2</a></li>
<li><a>Item3-3</a></li>
</ul>
</nav>

样式将是这样的：

.header {
    float: left;
    margin-right: 10px;
}
ul {
    list-style: none;
    margin:0;
    padding:0;
}
.clear {
    clear: both;
}
于 2012-05-24T18:48:19.637 回答