Question

我目前正试图通过重新创建来了解stumbleup导航栏的工作原理。

我在1中使用3个列表，如下所示：

<nav role="navigation">
        <ul id="rightnav">
            <li></li><!--
             --><li></li><!--
             --><li></li>
        </ul>
        <ul id="leftnav">
            <li></li><!--
             --><li></li><!--
             --><li></li>
        </ul>
        <ul id="centernav">
            <li id="dislike">&nbsp;</li><!--
             --><li id="stumble">STUMBLE</li><!--
             --><li id="like">&nbsp;</li>
        </ul>
    </nav>

这是我到目前为止所得到的： http://jsfiddle.net/litari/yCT4D/1/

无论我尝试什么，三个名单都不会正确排列。我对CSS很陌生，所以它可能是一些我不知道的东西。

我还要感谢对我的CSS的任何其他评论。如果它很糟糕，请告诉我（让我知道为什么。我想变得更好！）:)谢谢！

Answer 1

尝试这样的事情

<强> FIDDLE

ul
{
   list-style-type: none; 
}
nav{
    height: 30px;
    top: 0;
    right: 0;
    left: 0;
    position: fixed;
    width: 100%;
    background-color: red;
    text-align: center;
}
#lefttnav{
    float:left;
}
#centernav{
    display:inline-block;   
}
#rightnav{
    float:right;
}

Answer 2

尝试下面的CSS：

#leftnav, #centernav, #rightnav{
    display: inline;
}

选中此JSFiddle

Answer 3

使用这个小提琴：http://jsfiddle.net/Hive7/yCT4D/6/

HTML：

<body>
    <nav role="navigation">
        <div align='left' style='margin-left: -10px;'>
        <a href='#'>item 1</a>
        <a href='#'>item 1</a>
        </div>
        <div align='center' style='margin-top: -18px;'>
        <a href='#'>item 1</a>
        <a href='#'>item 1</a>
        </div>
        <div align='right' style='margin-top: -18px; margin-right: 15px;'>
        <a href='#'>item 1</a>
        <a href='#'>item 1</a>
        </div>
    </nav>
</body>

同一导航栏中的多个列表

3 个答案: