Question

当前正在尝试HTML和CSS，并在这个问题上苦苦挣扎。

我正在忙于响应式网站，并且某种程度上无法使导航栏超过导航栏的最大宽度超过内容的最大宽度。

我希望它看起来像https://imgur.com/a/KAk9mOi

我确实希望有人能帮助我。 TIA。

<nav class="navbar">
  <ul class="nav-items">
    <li class="nav-item nav-item--active"><a href="#">Home</a></li>
    <li class="nav-item"><a href="#">Contact</a></li>
  </ul>
</nav>

.main {
}

.navbar {
    padding: 20px;
    background-color: #1C2826;
    max-width: 100%;
}

.nav-items {
    display: flex;
    justify-content: center;
}

.nav-items > li {
    flex: 1;
    text-align: center;

}

.nav-item:not(:last-of-type) {
    margin-right: 20px;
}

.nav-item--active {
    /* after */
}

.content {
    padding: 8px;
}

.login-card {
    border: 1px solid #999;
    margin-bottom: 20px;
    padding: 12px;
    border-radius: 4px;
}

.login {
    display: flex;
    flex-direction: column;
}

.login-button {
    background-color: #D64550;
    padding: 4px;
    border: none;
    color: #ffffff;
    font-size: 20px;
}

.login-input {
    margin-bottom: 8px;
    border: none;
    border-bottom: 1px solid #999;
    padding-top: 4px;
    padding-bottom: 4px;
}

.footer {
    padding: 8px;
}

.inline-block {
    display: inline-block;
}

/* Alt over 460px */
@media only screen and (min-width: 460px) {
    .main{
        max-width: 600px;
    }

    .navigation-items{
        flex-wrap: wrap;
    }

    .login-button {
        font-size: inherit;
    }
}

https://jsfiddle.net/m0u79e8s/

Answer 1

我希望这是有用的

* {
  padding: 0px;
  margin: 0px;
}
.main {
}
 
.navbar {
    padding: 20px;
    background-color: #1C2826;
    width: 100%;
}
 
.nav-items {
    display: flex;
    justify-content: center;
}
 
.nav-items > li {
    flex: 1;
    text-align: center;
 
}
 
.nav-item:not(:last-of-type) {
    margin-right: 20px;
}
 
.nav-item--active {
    /* after */
}
 
.content {
    padding: 8px;
}
 
.login-card {
    border: 1px solid #999;
    margin-bottom: 20px;
    padding: 12px;
    border-radius: 4px;
}
 
.login {
    display: flex;
    flex-direction: column;
}
 
.login-button {
    background-color: #D64550;
    padding: 4px;
    border: none;
    color: #ffffff;
    font-size: 20px;
}
 
.login-input {
    margin-bottom: 8px;
    border: none;
    border-bottom: 1px solid #999;
    padding-top: 4px;
    padding-bottom: 4px;
}
 
.footer {
    padding: 8px;
}
 
.inline-block {
    display: inline-block;
}
 
/* Alt over 460px */
@media only screen and (min-width: 460px) {
  .main {
        display: flex;
    flex-direction: column;
    align-items: center;
  }
  .content {
    max-width: 460px;

  }
 
    .navigation-items{
        flex-wrap: wrap;
    }
 
    .login-button {
        font-size: inherit;
    }
}

<!doctype html>
<html>
    <head>
 
        <title>Responsive time</title>
       
        <meta name="viewport" content="width=device-width, initial-scale=1">
 
        <link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700" rel="stylesheet">
        <link rel="stylesheet" href="./reset.css">
        <link rel="stylesheet" href="./generic.css">
        <link rel="stylesheet" href="./styles.css">
    </head>
    <html>
        <body>
 
            <main class="main">
 
                <!-- Navigation elements -->
                <nav class="navbar">
                    <ul class="nav-items">
                        <li class="nav-item nav-item--active"><a href="#">Home</a></li>
                        <li class="nav-item"><a href="#">Contact</a></li>
                    </ul>
                </nav>
 
                <!-- Section -->
                <section class="content">
                    <h1 class="test">Time to get responsive</h1>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore deleniti, quia provident!</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis quas alias reiciendis velit, dolor eos temporibus culpa ex modi itaque nostrum natus doloribus sed maiores, a obcaecati quia sequi quisquam corrupti perspiciatis sit quam, qui expedita. Nemo sed dolor earum voluptate quod reiciendis rem laborum atque ex nulla sapiente ea ullam assumenda, fugiat quae incidunt dicta, cupiditate repellendus possimus aliquid! Ad veniam vero alias, rem quod atque dolores saepe possimus, tempora, eaque magnam culpa animi repellendus ratione dolorem harum quo.</p>
                   
                    <!-- Form -->
                    <div class="login-card">
                        <form class="login" action="#" method="get">
                            <input class="login-input" type="email" placeholder="Indtast email">
                            <input class="login-input" type="password" placeholder="Indtast kodeord">
                            <button class="login-button">Send</button>
                        </form>
                    </div>
 
                    <picture>
                      <source media="(max-width:459px)" srcset="img/cow.jpg">
                      <source media="(min-width:460px)" srcset="img/dog.jpg">
                      <img src="/img/cow.jpg" alt="animals">
                    </picture>
 
                </section>
 
                <footer class="footer">
                    <div class="footer-content">
                        <p>Lorem ipsum dolor sit amet.</p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit quas beatae voluptate.</p>
                        <a href="#">Some other link</a>
                    </div>
                    <div class="footer-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi!</p>
                        <img class="logo-image" src="/rubbish" alt="">
                    </div>
                </footer>
 
            </main>
        </body>
    </html>
</html>

使导航栏超过最大宽度[CSS]

1 个答案: