个人中心
gpt4 book ai didi

html - 移动 CSS 问题

转载 作者：行者123 更新时间：2023-11-28 04:46:43 27 4
gpt4 key购买 nike

我的移动 CSS 导航栏无法正常工作。我不是 100% 宽度，下拉菜单文本没有居中，当我点击一个链接时，菜单没有消失，而是留在屏幕上。

谁能帮我解决这个问题？

JSFiddle:https://jsfiddle.net/wepywurp/ 

<body>
   <div class="nav animated slideInDown">
       <img src="img/hamburger.png" alt="" class="hamburger">
       <div class="logo">
          <h1>STEN</h1>
       </div>
       <ul>
           <li><a href="#home">HOME</a></li>
           <li>
               <a href="#">PAGE</a>
               <i class="fa fa-angle-down" aria-hidden="true"></i>
               <ul>
                   <li><a href="#">DROPDOWN</a></li>
                   <li><a href="#">DROPDOWN</a></li>
               </ul>
           </li>
           <li><a href="#aboutme">ABOUT ME</a></li>
           <li><a href="#portfolio">PORTFOLIO</a></li>
           <li><a href="#">PAGE</a></li>
       </ul>
   </div>

   <div id="landing" class="landing animated fadeIn">
       <div class="container">
            <h1>STEN</h1>
            <hr>
            <p>I'M THE</p>
            <h2>NEXT GENERATION</h2>
            <button><a href="#aboutme">LEARN MORE</a></button>
            <button><a href="#">PLANS</a></button>
        </div>
       <a href="#aboutme"><i class="fa fa-angle-double-down scroll" aria-hidden="true"></i></a>
   </div>

   <div class="main-content-wrapper">
       <div id="aboutme" class="about-me">
           <h1>ABOUT ME</h1>
           <hr>
           <div class="section">
               <h2>WHO <span>AM I</span>?</h2>
               <p>
                   Sed ullamcorper vestibulum nulla et aliquam. Nullam in porta arcu, in tincidunt felis. Aliquam vestibulum quam quis rutrum pellentesque.
                   <br><br>
                   Ut cursus congue sem nec vulputate. In quis dictum lacus, in ornare ante. Maecenas mattis enim id est auctor, vitae semper sapien pharetra. Vivamus dapibus nulla ut mattis lacinia.
               </p>
           </div>
           <div class="section">
               <h2>WHAT I'M <span>GOOD</span> AT</h2>
               <p>
                   Things that I'm good at and things I'm still improving upon.
               </p>

               <h5>DESIGN</h5>
               <div class="progress-bar">
                   <div class="progress" style="width:60%"></div>
               </div>

               <h5>HTML</h5>
               <div class="progress-bar">
                   <div class="progress" style="width:90%"></div>
               </div>

               <h5>CSS</h5>
               <div class="progress-bar">
                   <div class="progress" style="width:75%"></div>
               </div>

               <h5>JQUERY</h5>
               <div class="progress-bar">
                   <div class="progress" style="width:40%"></div>
               </div>

               <h5>PHP</h5>
               <div class="progress-bar">
                   <div class="progress" style="width:30%"></div>
               </div>

           </div>
           <div class="section section-shadow">

           </div>
           <div class="section section-shadow">

           </div>
       </div>

       <div id="portfolio" class="portfolio">
           <h1>PORTFOLIO</h1>
           <hr>
       </div>
   </div>

   <div class="up">
       <i class="fa fa-angle-up" aria-hidden="true"></i>
   </div>


* {
    padding: 0;
    margin: 0;
    border: 0;
}

html, body {
    height: 100%;
    width: 100%;
    font-family: 'Raleway', sans-serif;
}

h1 {
    font-weight: 300;
    font-size: 50px;
}

.up {
    position: fixed;
    bottom: 0;
    right: 0;
    padding: 5px;
    background-color: #D4D4D4;
    height: 32px;
    width: 32px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    margin-right: 50px;
    z-index: 900;
    cursor: pointer;
    visibility: hidden;
}

.up i {
    font-size: 32px;
    line-height: 32px;
    margin-left: 6px;
    color: #333;
}

.nav {
    width: 100%;
    height: 10%;
    line-height: 10vh;
    background-color: #F2F2F2;
    border-bottom: 1px solid #E4E4E4;
    text-align: center;
    position: fixed;
    z-index: 999;
}

.nav .hamburger {
    display: none;
}

.nav .logo {
    float: left;
    margin-left: 10%;
}

.nav .logo h1 {
    color: #000;
    font-size: 32px;
}

.nav > ul {
    height: 100%;
    width: auto !important;
    display: inline-block;
    float: right;
    margin-right: 10%;

}

.nav > ul > li {
    display: inline-block;
    list-style: none;
    padding: 0 20px 0 20px;
    vertical-align: top;
    position: relative;
}

.nav > ul > li > ul {
    display: none;
    margin-left: -50%;
}

.nav > ul > li > ul > li {
    list-style: none;
    background-color: #D4D4D4;
    padding: 0 20px 0 20px;
    position: relative;
}

.nav li:hover > ul {
    display: block;
    position: absolute;
}

.nav ul a {
    color: #000;
    text-decoration: none;
}

.nav a:hover {
    color: #999;
}

.landing {
    height: 100%;
    width: 100%;
    background: url('../img/bg.jpg');
    background-size: cover;
    background-position: center;
    position: fixed;
    text-align: center;
    color: #FFF;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    z-index: 0;
}

.landing:before {
    content: " ";
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2);
}

.landing .container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
}

.landing .container h1 {
    letter-spacing: 12px;
    font-size: 78px;
    font-weight: 700;
}

.landing .container p {
    font-size: 22px;
    font-weight: 100;
}

.landing .container h2 {
    font-size: 32px;
}

.landing hr {
    width: 300px;
    margin: 0 0 15px 0;
    margin-left: calc(50% - 150px);
    border-bottom: 2px solid #EF2D56;
}

.landing button {
    width: 200px;
    padding: 18px 24px 18px 24px;
    margin-top: 20px;
    position: relative;
    color: #FFF;
    background-color: transparent;
    border: 1px solid #FFF;
}

.landing button a {
    color: #FFF;
    text-decoration: none;
}

.landing button:first-child {
    margin-right: 1%;
}

.landing button:last-child {
    margin-left: 1%;
    background-color: #EF2D56;
    border: 1px solid #EF2D56;
}

.landing button:hover {
    cursor: pointer;
}

.landing button:focus {
    outline: none;
}

.landing a {
    color: #FFF;
}

.landing i {
    font-size: 32px;
}

.scroll {
    position: absolute;
    bottom: 0;
    margin-bottom: 20px;
    cursor: pointer;
}

.main-content-wrapper {
    width: 100%;
    z-index: 50;
    position: absolute;
    margin-top: 100vh;
}

.about-me {
    width: 80%;
    height: auto !imporant;
    padding: 10vh 10% 10vh 10%;
    background-color: #F2F2F2;
    overflow: auto;
}

.about-me h1 {
    text-align: center;
    font-size: 48px;
    font-weight: bold;
    color: #333;
}

.about-me hr {
    width: 160px;
    margin: 15px 0 15px 0;
    margin-left: calc(50% - 80px);
    border-bottom: 1px solid #333;
}

.about-me .section {
    position: relative;
    height: 300px;
    width: 48%;
    margin: 1%;
    float: left;
}

.about-me h2 {
    font-weight: 100;
    margin-bottom: 12px;
}

.about-me h2 span {
    font-weight: 900;
    color: #333;
}

.about-me h5 {
    font-size: 18px;
    font-weight: 500;
    margin-top: 12px;
}

.about-me .progress-bar {
    width: 100%;
    height: 6px;
    background-color: #D4D4D4;
}

.about-me .progress {
    background-color: #333;
    height: 6px;
}

.about-me .section-shadow {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    background-color: #FFF;
}

.portfolio {
    width: 80%;
    height: auto !imporant;
    padding: 10vh 10% 10vh 10%;
    background-color: #FAFAFA;
    overflow: auto;
}

.portfolio h1 {
    text-align: center;
    font-size: 48px;
    font-weight: bold;
    color: #333;
}

.portfolio hr {
    width: 160px;
    margin: 15px 0 15px 0;
    margin-left: calc(50% - 80px);
    border-bottom: 1px solid #333;
}

@media only screen and (max-width: 850px){
    .up {
        margin-right: 8px;
    }

    .nav .hamburger {
        height: 6vh;
        width: 6vh;
        display: inline-block;
        float: left;
        margin: 2vh 0 0 2vh;
    }

    .nav .logo {
        position: relative;
        margin-left: calc(50% - 12.5vh);
    }

    .nav > ul {
        display: none;
        float: none;
        padding-top: 10vh;
    }

    .nav .hamburger:hover ~ ul {
        display: block;
        width: 100%;
        margin: 0;
    }

    .nav li:hover > ul {
        display: block;
        position: relative;
    }

   .nav > ul:hover {
        display: block;
        width: 100%;
    }

    .nav ul:hover li {
        width: 100%;
        padding: 0;
    }

    .nav > ul > li {
        display: block;
        background-color: #F2F2F2;
    }

    .about {
        margin-top: 100vh;
    }
}

最佳答案

从 .nav > ul 中删除以下行 width: auto !important 将解决移动设备上的问题。

https://jsfiddle.net/wepywurp/

关于html - 移动 CSS 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40919996/

27 4 0
文章推荐： html - 如何定义宽度并使用最大宽度
文章推荐： html - 如何使用 Bootstrap 堆叠 div 层？
文章推荐： javascript - Knockoutjs 组件无法使用 js 功能
文章推荐： html - 在 html 中，文本转换属性不适用于文本框中的初始值
行者123
个人简介

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

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