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 は、それらが 3 つの別個の要素であり、互いのサブリストではない限り、使用することもできます。この下に他のコンテンツがあり、上のマークアップの周りを流れる必要があるため、絶対配置を使用しないことをお勧めします。古い IE のハックも必要ありません。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

OK、本当にマークアップを変更できない場合、または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 に答える