0

HTMLテーブルをリストに作り直しています。次のようになります。

<ul>

<li>Some fruits
<ul>
  <li>2013
    <ul>
      <li>Apple</li>
        <li>Kiwi</li>
    </ul>
  </li>
</ul>
</li>

<li>Some other fruits
<ul>
  <li>2012
    <ul>
      <li>Banana</li>
    </ul>
  </li>
  <li>2011
    <ul>
      <li>Lemon</li>
        <li>Orange</li>
        <li>Plum</li>
    </ul>
  </li>
  <li>2009
    <ul>
      <li>Peach</li>
      <li>Pear</li>
    </ul>
  </li>

</ul>
</li>
</ul>

サブリストの最初のエントリを年と水平方向に揃える方法を見つけようとしています。このような：

2011   Lemon
       Orange
       Plum

ネストされた要素が頭に浮かび、立ち往生しています。これには、要素の表示タイプといくつかのフローティングが含まれると感じています。何か案は？ここでフィドル: http://jsfiddle.net/HUH62/4/ ありがとう。

4

1 に答える 1

2

私が正しく理解していれば、あなたが達成しようとしていることに応じて変更された同じフィドルがあります: fiddle。

CSS をより読みやすくするためにいくつかのクラスを追加し、各セクションの「サブタイトル」を div でラップして、それらにフローティングを適用できるようにしました。

要素を視覚化するためだけに追加されたと解釈したため、色も削除しました。

CSS

h4 {
    margin: 0px;
    padding: 0px;
    float:left;
}
ul {
    list-style: none outside none;
    padding: 0;
}
ul li ul li ul {
    float:left;
    margin-left: 10px;
}
ul li {
    clear:both;
}

HTML

<ul>
    <li>Some fruits
        <ul>
            <li>
                <h4>2013</h4>
                <ul>
                    <li>Apple</li>
                    <li>Kiwi</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Some other fruits
        <ul>
            <li>
                <h4>2012</h4>
                <ul>
                    <li>Banana</li>
                </ul>
            </li>
            <li>
                <h4>2011</h4>
                <ul>
                    <li>Lemon</li>
                    <li>Orange</li>
                    <li>Plum</li>
                </ul>
            </li>
            <li>
                <h4>2009</h4>
                <ul>
                    <li>Peach</li>
                    <li>Pear</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
于 2013-05-27T17:06:59.047 に答える