Question

我需要将元素堆叠成网格/列结构，其中1高于2,3，高于4等等。有没有更好的方法来实现这一点而不使用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>

Answer 1

这样做：Working fiddle

<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>

Answer 2

你可以把它分成列表中的块。

<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/

带CSS的菜单列

2 个答案: