html - 使响应式菜单与上面的图片/标题宽度相同

Question

我有一个带有图片的页眉，我希望在缩小窗口时在其下方有一个与宽度相匹配的导航菜单。目前，我的标题和图片比例很好，但我的菜单按钮没有。在早期，窗口变得太窄，菜单按钮会放在单独的一行上。如何使菜单与图像宽度匹配？以下是显示问题的相关代码和图像。

http://imgur.com/a/go2Of

标题和菜单的 HTML:

<div id="wrapper1">
        <div id="header">
            <div id="logo">
                    <img src="Images/logolow.jpeg"/>
                </picture>  
            </div>  
            <div id="login">
                    <fieldset>
                    <Legend>Login</Legend>
                    Username <input type="text" name="username"/>
                    Password <input type="password" name="password"/>
                    <input type="submit" value="Login">
                    <div id="register">
                        <a href="Assignment1-Register.html">Not a member? Click here to register!</a>
                    </div>
                    </fieldset>     
            </div>
        </div>
        <div id="sidebar">
        <a href=""> Home</a><a href=""> Search</a><a href=""> All Profs</a><a href=""> Submit</a><a href="#contact"> Contact</a>
        </div>
</div>

CSS:

#wrapper1{
    width: 85%;
    margin-left: auto;
    margin-right: auto;
    font-family: Helvetica, Verdana, Arial;
}

#header {
    width: 100%;
    position: relative;
}

#logo {
    height: 450px;
    width: 100%;
} 

#logo img {
    height: 100%;
    width: 100%;
}

#login {
    bottom: 0px;
    right: 0px;
    width: 15%;
    color: white;
    position: absolute;
}

#login a {
    color: inherit 
}

#register {
    font-size: 14px;
}

#login fieldset { 
    display: block;
    border: 2px solid white;
}

#sidebar {
    margin: 14px;
    width: 100%;
}

#sidebar a {
    height: 40px;
    padding-top: 10px;
    padding-left: 6.55%;
    padding-right: 6.55%;
    text-align: center;
    font-size: 12pt;
    font-weight: bold;
    background-color: black;
    color: white;
    border-style: outset;
    border-width: 1px;
    text-decoration: none;
}

Answer 1

这是一个解决方案。

在您的链接上使用加起来为 100% 的百分比宽度。确保不在这些链接上使用display: inline-block;，因为额外的空格会添加到内联元素中，并且会使它们的总大小超过父元素的 100%。

header img {
  display: block;
  max-width: 100%;
}
nav {
  margin-left: -5px;
  margin-right: -5px;
}
nav a {
  box-sizing: border-box;
  display: block;
  float: left;
  width: calc( 25% - 10px );
  margin: 0 5px;
  padding: 0.5rem 1rem;
  color: white;
  text-align: center;
  background-color: #999;
  
}

<header>

  <img src="http://placehold.it/1600x400?text=hero-image">
  
  <nav>
    <a href="#">One</a>
    <a href="#">Two</a>
    <a href="#">Three</a>
    <a href="#">Four</a>
  </nav>
  
</header>

对于更大的屏幕，您需要:

• 一张更大的图片，或者
• 更大的图像和/或将 max-width: 100%; 切换为 width: 100%;(注意，如果图像拉伸(stretch)超过其原始大小，它将像素化)或
• 限制导航链接的最大宽度。