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>

如何只使用中央支助系统实现这一列报?

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

只要UL是三个独立的元素,而不是彼此的子列表, ULs也可以使用。我宁愿不使用绝对定位,因为下面还有其他内容应该围绕上面的加注。我也不需要旧的 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

OK, 如果您真的不能更改标记上方的标记或使用 jQuery 来更改标记上方的标记, 那么下面只有一个 CSS 解决方案 :

http://jsfiddle.net/wSLEb/" rel="no follow" >http://jsfidle.net/wSLEb/

您可以绝对定位信头, 并给出第一个 ul 边距上方。然后使用 < code>: nth- 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 s 网站阅读更多关于伪类选择者的更多信息:http://css-tricks.com/pseudo-level-selectors/

祝你好运

Answer 2

要开始列表, 请在 uls 中。

如果您不能使用绝对定位, 那么您需要更改标记, 以达到这种型式。页眉应该在 html 中互相出现。如果您不能在源头上修改标记, 那么您将不得不使用 jQuery 来重新排序页面加载的标记。

在您的 jQuery 中, 我会瞄准所有信头, 然后除去所有信头, 除了第一个信头, 然后在第一个信头之后插入这些被删除的信头, 然后在最后一个信头之后放一个清除信头。

见以下或代码: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;
}

友情链接