Question

鉴于标记类似于：

<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黑客;仅支持IE9和现代浏览器。

这甚至可能吗？谢谢！

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

Menu1
Item1-1 
Item1-2 
Item1-3 

Menu2
Item2-1 
Item2-2 
Item2-3 

Menu3 
Item3-1 
Item3-2 
Item3-3

Answer 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/

祝你好运

Answer 2

要开始你的名单应该是在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;
}

多个导航组的CSS格式

2 个答案: