个人中心
gpt4 book ai didi

html - 在响应式设计中导航栏覆盖菜单项

转载 作者：行者123 更新时间：2023-11-28 08:56:17 24 4
gpt4 key购买 nike

您好，我遇到了这个问题:我的网站上有标题，并且在整个屏幕宽度上都可以正常工作。我想用@media 解决低屏幕分辨率问题。我有一个输入类型=复选框。如果选中复选框，则显示菜单项。但问题是为什么页面上的 div.overlay 覆盖了 my and items in？你在这里 jsFiddle:myTry 

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blog Bundle</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- Normalize css -->
    <link rel="stylesheet" href="css/normalize.css">

</head>
<body>
    <header class="box box-top">
        <div class="wrap">
            <span class="logo">Mobile blog</span>
            <div class="spacer"></div>
            <label for="show-menu" class="show-menu">Menu</label>
            <input type="checkbox" id="show-menu" role="button">
            <div class="menu" id="menu">
                <a href="#" class="box-item box-item-blue">Iphone</a>
                <a href="#" class="box-item box-item-green">Samsung</a>
                <a href="#" class="box-item box-item-red">Huawei</a>
                <a href="#" class="box-item box-item-white">Blackberry</a>
                <a href="#" class="box-item box-item-yellow">Sony</a>
                <a href="#" class="box-item box-item-purple">LG</a>
                <a href="#" class="box-item box-item-orange">Nokia</a>
                <a href="" class="box-item pull-right">Log In</a>
            </div>
        </div>
    </header>
    <div class="container">
        <div class="intro-image" style="background-image: url('img/cover.png');">
            <div class="overlay"></div>
        </div>

    </div>



<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>

样式在这里:

@import url(http://fonts.googleapis.com/css?family=Lobster);
div.container{
    padding: 0;
    width:100%;
}
/* Top image */
.intro-image{
    min-width: 100%;
    width: 100%;
    height: 550px;
    max-width: 1000px;
    background-repeat: no-repeat;
    background-position: center;
}
.overlay{
    position: relative;
    height: 100%;
    background-color: rgba(32,32,32,.7);
}
/* Navigate bar/box */
header{
    height: auto;
}
.box{
    height: 50px;
    width: 100%;
    background-color: rgb(0,0,0);
}
.box.box-top{
    top:0;
}
.box .logo{
    color:white;
    font-family: 'Lobster', cursive;
    font-size: 32px;
    float: left;
}
.box .spacer{
    width: 1px;
    height:30px;
    margin: 10px 30px;
    background: white;
    background-image: url('../img/spacer.png');
    float:left;
}
    /* Default definition of box item */
.box-item{
    padding: 0 15px;
    color:#919090;
    float: left;
    line-height: 47px;
    display: block;
    font-weight: bolder;
    z-index: 999;
}
.box-item:hover{
    padding: 0 15px;
    color:#fff;
    float: left;
    line-height: 47px;
    display: block;
    font-weight: bolder;
    text-decoration: none;
}
    /* Color definitions of box items */
        /* Blue */
.box-item-blue{
    border-bottom: 3px solid #0074D9;
}
.box-item-blue:hover{
    border-bottom: 0px solid #0074D9;
    color: #0074D9;
}
        /* Green */
.box-item-green{
    border-bottom: 3px solid #2ECC40;
}
.box-item-green:hover{
    border-bottom: 0px solid #2ECC40;
    color: #2ECC40;
}
        /* Red */
.box-item-red{
    border-bottom: 3px solid #FF4136;
}
.box-item-red:hover{
    border-bottom: 0px solid #FF4136;
    color: #FF4136;
}
        /* White */
.box-item-white{
    border-bottom: 3px solid #FFFFFF;
}
.box-item-white:hover{
    border-bottom: 0px solid #FFFFFF;
    color: #FFFFFF;
}
        /* Yellow */
.box-item-yellow{
    border-bottom: 3px solid #FFDC00;
}
.box-item-yellow:hover{
    border-bottom: 0px solid #FFDC00;
    color: #FFDC00;
}
        /* Orange */
.box-item-orange{
    border-bottom: 3px solid #FF851B;
}
.box-item-orange:hover{
    border-bottom: 0px solid #FF851B;
    color: #FF851B;
}
        /* Purple */
.box-item-purple{
    border-bottom: 3px solid #B10DC9;
}
.box-item-purple:hover{
    border-bottom: 0px solid #B10DC9;
    color: #B10DC9;
}
/* Wrapper */
.wrap{
    width:100%;
    margin:auto;
    max-width: 1100px;
}
/* Button for responsive menu */
.show-menu{
    padding: 0 15px;
    color:#919090;
    float: left;
    line-height: 48px;
    display: block;
    font-weight: bolder;
    border: 1px solid rgb(32,32,32);
    cursor: pointer;
    display: none;
}
.show-menu:hover{
    color: #fff;
}
.box input[type=checkbox]{
    display: none;
}
input[type=checkbox]:checked ~ .box{
    height: auto;
}
input[type=checkbox]:checked ~ #menu{
    display: block;
}
@media screen and (max-width : 832px){
    /*Make dropdown links appear inline*/
    .menu {
        position:static;
        height: auto;
        display: none;
    }
    /*Make all menu links full width*/
    .box-item{
        width: 100%;
        background: rgb(0,0,0);
        text-align: center;
    }
    /*Display 'show menu' link*/
    .show-menu {
        display:block;
    }
    /* Color definitions of box items (only hover state) */
        /* Blue */
    .box-item-blue:hover{
        border-bottom: 3px solid #0074D9;
        color: #0074D9;
    }
            /* Green */
    .box-item-green:hover{
        border-bottom: 3px solid #2ECC40;
        color: #2ECC40;
    }
            /* Red */
    .box-item-red:hover{
        border-bottom: 3px solid #FF4136;
        color: #FF4136;
    }
            /* White */
    .box-item-white:hover{
        border-bottom: 3px solid #FFFFFF;
        color: #FFFFFF;
    }
            /* Yellow */
    .box-item-yellow:hover{
        border-bottom: 3px solid #FFDC00;
        color: #FFDC00;
    }
            /* Orange */
    .box-item-orange:hover{
        border-bottom: 3px solid #FF851B;
        color: #FF851B;
    }
            /* Purple */
    .box-item-purple:hover{
        border-bottom: 3px solid #B10DC9;
        color: #B10DC9;
    }
}

我该如何解决？

感谢您的回答，抱歉我的英语不好。

最佳答案

好的，我明白了!我的行高很大。解决方案更改自

.show-menu{
    ..
    line-height: 48px;
    ..
}

到

.show-menu{
    ..
    line-height: 43px;
    ..
}

关于html - 在响应式设计中导航栏覆盖菜单项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27111794/

24 4 0
文章推荐： javascript - IE 屏蔽我的 C 盘上的 activex 内容有什么意义？
文章推荐： JavaScript 添加到书签在 FF >= 23.0 中不起作用
文章推荐： javascript - Eclipse 中的 JSDT 部分 jQuery 代码辅助
文章推荐： css - Bootstrap 响应式水平滚动条
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com