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/

私が何をしようとしても、3 つのリストが適切に並ぶことはありません。私は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 に答える