0

我目前正在尝试通过重新创建 stumbleupons 导航栏来了解它的工作原理。

我在 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 的任何其他评论。如果它很糟糕，请告诉我（并让我知道为什么。我想变得更好！）:) 谢谢！

4

3 回答 3

1

尝试这样的事情

小提琴

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;
}
于 2013-07-18T08:47:59.393 回答
0

试试下面的CSS：

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

检查这个JSFiddle

于 2013-07-18T08:44:59.230 回答
-1

使用这个小提琴：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>
于 2013-07-18T09:00:49.393 回答