CSS

Question

我创建了一个JSFiddle来展示。 http://jsfiddle.net/nv78t/

发生的事情是我希望列表项具有统一的长度，150px，但是当我设置它时，动画似乎从左向右切换，这是我不想要的。此外，在页面加载时，链接是相隔一定的边距空间，但似乎跳转到不同的边距空间。我希望它们保持原样，只有宽度从均匀的宽度变化。我做错了什么？我试图调整的所有内容都给出了负面结果。

我已经发布了与此相对应的所有代码。

我的HTML看起来像这样：

<div id="leftcolumn">
    <ul id="navigation">
        <li><a href="#" id="nav1" class="nav">Main</a>

        </li>
        <li><a href="#" id="nav2" class="nav">Double Rainbow</a>

        </li>
        <li><a href="#" id="nav3" class="nav">Monochrome Rainbow</a>

        </li>
    </ul>
</div>

我喜欢这样的CSS，

#leftcolumn {
    float: left;
    width: 300px;
    margin: 5px;
    font-family: Calibri;
}
#leftcolumn ul {
    list-style: none;
    text-align: right;
    padding: 10px;
    float: right;
    /*width: 150px;*/
}
#leftcolumn li {
    margin-bottom: 25px;
    display: block;
    /*width: 150px;*/
}
#leftcolumn a:link {
    text-decoration: none;
    color: white;
}
#leftcolumn a:visited {
    color: white;
}
#nav1 {
    background-color: #FF2300;
    padding: 7px;
}
#nav2 {
    background-color: #FF9A00;
    padding: 7px;
}
#nav3 {
    background-color: #FFE800;
    padding: 7px;
}

和我的JQuery一样：

$(".nav").hover(function () {
    $(this).animate({
        width: "250px"
    });
}, function () {
    $(this).animate({
        width: "150px"
    });
});

Answer 1

在每个链接中，将文本包装在<span>元素中，如下所示：

<li><a href="#" id="nav1" class="nav"><span>Main</span></a></li>
<li><a href="#" id="nav2" class="nav"><span>Double Rainbow</span></a></li>
<li><a href="#" id="nav3" class="nav"><span>Monochrome Rainbow</span></a></li>

并使用以下CSS声明（我已将其剥离以重点关注问题）：

#leftcolumn {
    width: 300px;
    margin: 5px;
    font-family: Calibri;
}
#leftcolumn ul {
    list-style: none;
    padding: 10px 10px 10px 30px;
}
#leftcolumn li {
    margin-bottom: 25px;
}
#leftcolumn a {
    width: 150px;
    display: inline-block;
    text-decoration: none;
    color: white;
    padding: 7px;
}
#leftcolumn a span {
    width: 150px;
    display: inline-block;
    text-decoration: none;
    text-align: right;
    color: white;
}
#nav1 {
    background-color: #FF2300;
}
#nav2 {
    background-color: #FF9A00;
}
#nav3 {
    background-color: #FFE800;
}

这里的关键属性是display: inline-block;。默认情况下，锚标记是内联元素，因此将忽略维度属性。 jQuery的animate()函数必须更改其目标元素的display属性才能生成正确的行为。

编辑：使用块行为和设置宽度包装内部<span>元素中的链接文本将阻止文本在此方案中移动，因为它是正在设置动画的外部<a>标记。

Answer 2

点击此处，http://jsfiddle.net/yeyene/nv78t/5/，您想要这样吗？

CSS

#leftcolumn {
    float: left;
    width: 300px;
    margin: 5px;
    font-family: Calibri;
    background:#dfdfdf;
}
#leftcolumn ul {
    list-style: none;
    padding: 10px;
    width: 250px;
    float:right;
}
#leftcolumn a:link {
    text-decoration: none;
    color: white;
}
#leftcolumn a:visited {
    color: white;
}
#leftcolumn li {
    width: 150px;
    float:right;
    display: block;
    text-decoration: none;
    color: white;
    padding: 7px;
}
a#nav1,
a#nav2,
a#nav3{
    width: 150px;
    margin-bottom: 25px;
    float:right;
    text-decoration: none;
    color: white;
    padding: 7px;
    text-align:right;
}
#nav1 { background-color: #FF2300; }
#nav2 { background-color: #FF9A00; }
#nav3 { background-color: #FFE800; }

Answer 3

将此添加到您的CSS：

#leftcolumn a {float:right}

您会注意到，当您将鼠标悬停在每个项目上并再次返回时，您将获得排队的动画。如果你不想要这个;

更改

$(this).animate

到

$(this).stop().animate

<强>修正：

使用CSS修复：http://jsfiddle.net/nv78t/2/

使用CSS修复和jQuery修复：http://jsfiddle.net/nv78t/3/

我的导航行为很有趣：设置宽度不起作用，它会跳跃

3 个答案:

CSS