Question

我的网页上的横幅区域有一个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
}

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

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

链接溢出容器div

4 个答案: