为什么下拉菜单会压低下方的div

发布于 2024-12-18 14:45:26 字数 1669 浏览 0 评论 0原文

我有这个页面,如果您滚动到中间,您将看到一个选择送货方式下拉列表,如果您单击它。它将推送审核条款和Conditions 链接向下...这是我的代码

HTML

<div class="shipping-box lf">
<div class="ship-box1 lf">
    <div class="sel-ship lf">
        <div class="ss lf">
            <span class="lf">Select Shipping Method</span>
            <a class="ship-btn" href="#"></a>
        </div>
        <div class="dropdown lf" style="display:none;">
            <ul>
                <li class="ss-1 lf">1 Location</li>
                <li class="ss-2 lf">2 Location</li>
            </ul>       
        </div>  
    </div>
    <div class="terms lf">Review Terms & Conditions</div>
</div>

CSS

.shipping-box {
    height: 65px;
    padding-top: 0;
    position: relative;
    width: 700px;
}

.lf {
    float: left;
}

.ship-box1 {
    width: 220px;
}

.sel-ship {
    width: 220px;
}

.terms {
    color: #009900;
    font-family: "helvetica neue";
    font-size: 12px;
    padding-left: 20px;
    text-decoration: underline;
    text-transform: uppercase;
    width: 200px;
}

JQUERY

$('.ship-box1, .ship-btn').click(function () {
    $(this).parents('.sel-ship').find('.dropdown').slideToggle();
    $(this).parents('.ss').toggleClass('ship-btn:hover');
    return false;
});

有关如何确保术语链接保留的任何想法地方

I have this page and if you scroll to the middle you will see a Select Shipping Method dropdown and if you click on it. It will push the Review Terms & Conditions link down...here is my code

HTML

<div class="shipping-box lf">
<div class="ship-box1 lf">
    <div class="sel-ship lf">
        <div class="ss lf">
            <span class="lf">Select Shipping Method</span>
            <a class="ship-btn" href="#"></a>
        </div>
        <div class="dropdown lf" style="display:none;">
            <ul>
                <li class="ss-1 lf">1 Location</li>
                <li class="ss-2 lf">2 Location</li>
            </ul>       
        </div>  
    </div>
    <div class="terms lf">Review Terms & Conditions</div>
</div>

CSS

.shipping-box {
    height: 65px;
    padding-top: 0;
    position: relative;
    width: 700px;
}

.lf {
    float: left;
}

.ship-box1 {
    width: 220px;
}

.sel-ship {
    width: 220px;
}

.terms {
    color: #009900;
    font-family: "helvetica neue";
    font-size: 12px;
    padding-left: 20px;
    text-decoration: underline;
    text-transform: uppercase;
    width: 200px;
}

JQUERY

$('.ship-box1, .ship-btn').click(function () {
    $(this).parents('.sel-ship').find('.dropdown').slideToggle();
    $(this).parents('.ss').toggleClass('ship-btn:hover');
    return false;
});

Any ideas on how to make sure the terms link stays in place

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

沧笙踏歌 2024-12-25 14:45:26

这将为您修复它:

.sel-ship { position: relative; }
.dropdown { position: absolute; top: 25px; }

This will fix it for you:

.sel-ship { position: relative; }
.dropdown { position: absolute; top: 25px; }
一身软味 2024-12-25 14:45:26

尝试添加这个:

.sel-ship{
    position:absolute;
}
.terms{
    margin-top:30px;
}

Try adding this:

.sel-ship{
    position:absolute;
}
.terms{
    margin-top:30px;
}
我的痛♀有谁懂 2024-12-25 14:45:26

.sel-ship类设置position:absolute;,为.terms类设置margin-top:35px;

Set for .sel-ship class position:absolute;, for .terms class set margin-top:35px;

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文