jquery - コンテナ div からはみ出すリンク

Question

ボディ ロードで実行される Web ページのバナー エリアに jQuery アニメーションがあります。バナー表示は最初は none に設定されており、関数の実行時に変更されます。

function displayExpand()
    {
    $('#displayArea').slideDown('slow', function(){});
    }

奇妙な理由で、ナビゲーション メニューのコンテナがオーバーフローし、各リンクがページの右端に重なって表示されます。さらに奇妙なのは、これはページを更新したときにのみ発生することです。別のリンクからページにアクセスすると、ナビゲーション メニューは正常に表示されます。また、Chromeで実行した場合にのみ発生するようです

CSS

#linkContainer {
    margin-top:20px;
    float:right;
    text-align:right;
    height:55px;
}

HTML

<div id="linkContainer">
    <div class="mybuttons" style="color:#C00; font-weight:bold;">Home</div>
    <a href="about.html" style="text-decoration:none"><div class="mybuttons">About</div></a>
    <a href="portfolio.html" style="text-decoration:none"><div class="mybuttons">Portfolio</div></a>
    <a href="resume.html" style="text-decoration:none"><div class="mybuttons">Resume</div></a>
    <a href="contact.html" style="text-decoration:none"><div class="mybuttons">Contact</div></a>
</div>

なぜ何か提案はありますか？

Answer 1

それらを水平ナビゲーションバーに表示したい場合。div's次に、使用する代わりに<li>

コードは次のとおりです。

HTML

<div id="linkContainer">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Resume</a></li>
        <li><a href="">Contact</a></li>
    <ul>
  </div>

CSS

#linkContainer {
margin-top:20px;
float:right;
height:55px;
width:auto;
}

ul li
{
    list-style:none;
    display:inline-table;
    padding-left:30px;
}

これがあなたを助けることを願っています..

Answer 2

.mybuttons {
    margin-top:20px;
    float:left;
    text-align:left;
    height:55px;
    padding: 1px;
    margin: 1px
}

#linkContainer {
    margin-top:20px;
    float:right;
    text-align:right;
    height:55px;
    padding: 1px;
    margin: 1px
}

クラスhttp://jsfiddle.net/j6UhE/3/でdivに適用してみてください.mybutton

Answer 3

HTMLを次のように変更します

<ul id="linkContainer">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="resume.html" >Resume</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>

およびCSSとして

ul#linkContainer{ float:right}
ul#linkContainer li{ float:left:margin-right:5px;}
ul#linkContainer li a.active{color:#C00; font-weight:bold;}
ul#linkContainer li a{ display:block;text-decoration:none}

Answer 4

必要なのは、次のリグを取得することだけdivsですanchors: JSFiddle