0

我的网页上的横幅区域有一个 jQuery 动画，该动画在正文负载上运行。横幅显示最初设置为无，然后在函数运行时更改。

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>

任何建议为什么？

4

4 回答 4

2

如果您想在水平导航栏中显示它们。然后代替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;
}

希望对你有帮助..

于 2013-05-15T12:03:08.257 回答
1 
.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
}

尝试使用类.mybutton http://jsfiddle.net/j6UhE/3/将其应用于 div

于 2013-05-15T11:52:43.440 回答
1

将您的 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}
于 2013-05-15T12:07:16.587 回答
0

divs所有你需要的是得到钻机anchors：JSFiddle

于 2013-05-15T12:11:48.880 回答