1

どこでも検索しましたが、提案は探しているものではありません。基本的に、リストは ul の中にあります。ul の高さは正確なサイズに設定されています。内部のリスト項目は、相互に、また ul コンテナーの上部と下部 (高さが入る場所)に対して等間隔になるようにしたいので、スペースはすべて同じサイズになります。これどうやってやるの？

<ul id="nav">
    <li><a href="index.html" id="tab">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>
4

3 に答える 3

1

「li」アイテムの数がランダムで何でもかまいませんが、純粋なHTML+CSSソリューションは不可能に見えます。これを機能させるには、いくつかのJSコードが必要になります。

<style>
#nav { height: x px; }
</style>

<ul id="nav">
    <li><a href="index.html" id="tab">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
</ul>

<script>
var listItems = document.querySelectorAll("ul#nav > li");
for(var l = 0; l < listItems.length; l++) {
  listItems[l].style.height = Math.floor(x/listItems.length) + "px";
}
</script>

一時的な例は次の場所にあります：http：//jsfiddle.net/bKxUx/

于 2013-01-07T07:09:12.680 に答える
1

CSS フレキシブル ボックス レイアウト モジュールは、あなたが望むものかもしれません。以下は、私のクロムで動作する実際のサンプルです。(仕様は変わるかもしれないので、今は使わないほうがいいです)

<html>
    <head>
        <style>
            .flex-ul {
                height: 500px;
                width: 200px;
                border: 1px solid #ccc;
                display: -webkit-box;

                -webkit-box-orient: vertical;
                -webkit-box-pack: justify;
            }
            .inner {
                -webkit-flex: 1;
                -webkit-order: 0;
            }
        </style>
    </head>
    <body>
        <ul class="flex-ul">
            <li class="inner">Item one
            <li class="inner">Item two
            <li class="inner">Item three
            <li class="inner">Item four
        </ul>
    </body>
</html>
于 2013-01-07T07:03:37.203 に答える