1

我需要将元素堆叠成网格/列结构，其中 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>
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 回答