0

次の画像のように並べて表示する必要がある見出し付きのリストが2セットあります。

ここに画像の説明を入力してください

これが私のhtmlです：

<h2>Pages</h2>
<ul class="one">
     <li><a href="">About</a></li>
     <li><a href="">Archives</a></li>
     <li><a href="">About</a></li>
     <li><a href="">Archives</a></li>
</ul>

<h2>Pages</h2>
<ul class="two">
    <li><a href="">About</a></li>
    <li><a href="">Archives</a></li>
    <li><a href="">About</a></li>
    <li><a href="">Archives</a></li>
</ul>

HTMLに変更を加えることができません。私はcssのみを使用してこれを達成する必要があります。

フィドルを参照してください：http： //jsfiddle.net/Pxtvh/

4

5 に答える 5

0

絶対位置を使用するため、あまり良くないことはわかっていますが、ここに私の解決策があります: http://jsfiddle.net/Pxtvh/25/

h2:nth-of-type(2){
    position: absolute;
    left: 100px;
    top: 0;
}
ul:nth-of-type(2){
   position: absolute;
    left: 100px;
    top: 1em;
}
于 2014-10-24T23:44:38.160 に答える
0

HTML を使用できる場合は、各ヘッダーとそのリストを

<div style="float:left">

これは機能します。試してみましたが、完全に css を使用する場合は、css コードを使用できると思います。

ul.two {
    position:absolute;
    top:0px;
    left:100px;
}

これはヘッダーを配置しません。ヘッダーは両方であり、個々のクラスがないため、上記のように html を変更する以外に解決策は考えられません。また、最初のリストの幅を変更したい場合は、「左」パラメーターを更新する必要があります。

于 2012-05-26T10:26:03.870 に答える
0

Waffle Face が提案したように、h2 と ul の 2 番目のセットの両方で、position: absolute と set left and top pixel を使用して探索を試みることができます。

于 2012-05-26T10:29:00.110 に答える
0

指摘されているように、CSS だけではこれを行うことはできません。

理想的には、見出しとリストのグループを DIV で囲むことができますが、html を編集できないと述べています。

JavaScript を使用できる場合は、ヘッダー リストのグループを DIV で動的にラップして、同じ効果を得ることができます。

jQuery でこれを行う方法は次のとおりです。

$('h2 + ul').each(function () {
    $(this).prev().andSelf().wrapAll('<div class="grouped-list"/>');
});

次に、css ファイルでdiv.grouped-list左にフロートします。 実際の例を参照してください。

于 2013-05-24T14:35:19.687 に答える
-1 
ul {
    float: left;
    list-style: none;
    padding: 0;
    margin: 0;
}

これにより、<ul>左にフロートし、編集してHTMLを追加します

<ul>
    <li>link 1</li>
    <li>link 2</li>
    <li>link 3</li>
    <li>link 4</li>
</ul>

次に2つ目：

<ul>
    <li>link 1 column2</li>
    <li>link 2 column2</li>
    <li>link 3 column2</li>
    <li>link 4 column2</li>
</ul>
于 2013-05-24T12:43:25.647 に答える