1

要素を 2 の上に 1、4 の上に 3 などのグリッド/列構造に積み重ねる必要があります。javascript を使用せずに順序付けされていないリストを使用せずにこれを達成するためのより良い方法はありますか? 私が持っているものは機能していますが、これはこれを達成するための悪い方法のようです。

<style type="text/css">
    #nav{
        height:63px;
        width:100%;
        position:relative;
    }
    ul.topnav {
        margin:0 0;
        padding:0 0;
        list-style:none;
        font-size:14px;
    }
    ul.topnav li {
        width:180px;
        height:30px;
        margin:1px 0 0;
        background-color:#666;
        position: absolute;
        left:0; top:0;
        }
        ul.topnav li.navTopPos{ top:32px; }
        ul.topnav li.navLeftPos1{ left:180px; }
        ul.topnav li.navLeftPos2{ left:360px; }
        ul.topnav li.navLeftPos3{ left:540px; }
</style>

</head>
<body>

<div id="nav">
    <ul class="topnav">
        <li>ONE</li>
        <li class="navTopPos">TWO</li>
        <li class="navLeftPos1">THREE</li>
        <li class="navLeftPos1 navTopPos">FOUR</li>
        <li class="navLeftPos2">FIVE</li>
        <li class="navLeftPos2 navTopPos">SIX</li>
        <li class="navLeftPos3">SEVEN</li>
        <li class="navLeftPos3 navTopPos">EIGHT</li> 
    </ul>
</div>
</body>
4

2 に答える 2

1

これでできますか:作業フィドル

<style type="text/css">
    #nav{
        height:63px;
        width:100%;
       }
    ul.topnav {
        margin:0 0;
        padding:0 0;
        list-style:none;
        font-size:14px;
    }
    ul.topnav li {
        width:180px;
        height:30px;
        margin:1px 0 0;
        background-color:#666;
        float:left
        }
</style>

</head>
<body>

<div id="nav">
    <ul class="topnav">
        <li>ONE</li>
        <li>THREE</li>
        <li>FIVE</li>
        <li>SEVEN</li>
    </ul>
    <ul class="topnav">
        <li>TWO</li>
        <li>FOUR</li>
        <li>SIX</li>
        <li>EIGHT</li>
    </ul>
</div>
</body>
于 2012-06-29T02:50:51.617 に答える
0

リスト内のブロックに分割するだけです。

<style type="text/css">
    #nav{
        height:63px;
        width:100%;
        position:relative;
    }
    ul.topnav {
        margin:0 0;
        padding:0 0;
        list-style:none;
        font-size:14px;
    }
    ul.topnav li {
        height:30px;
        margin:1px 0 0;
        background-color:#666;
        position: absolute;
        left:0; top:0;
    }
</style>

</head>
<body>

<div id="nav">
    <ul class="topnav">
        <div style="display:inline-block; width: 180px;">
            <li>ONE</li>
            <li>TWO</li>
        </div>
        <div style="display:inline-block; width: 180px;">
            <li>THREE</li>
            <li>FOUR</li>
        </div>
        <div style="display:inline-block; width: 180px;">
            <li>FIVE</li>
            <li>SIX</li>
        </div>
        <div style="display:inline-block; width: 180px;">
            <li>SEVEN</li>
            <li>EIGHT</li> 
        </div>
    </ul>
</div>
</body>

実際の例はこちら: http://jsfiddle.net/cDeeP/

于 2012-06-29T03:27:53.983 に答える