Question

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

标题和菜单的HTML：

 <textarea><? Php code? ></textarea>

CSS：

<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>

Answer 1

这是一个解决方案。

在链接上使用百分比宽度，最多可达100％。确保不在这些链接上使用display: inline-block;，因为额外的空格会添加到内联元素中，并使其总大小超过父元素的100％。

＆＃13;

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;
  
}

＆＃13;

<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>

＆＃13;

对于较大的屏幕，您需要：

较大的图片，或
放大图像和/或切换max-width: 100%;到width: 100%;（小心，如果图像超出原始大小，它会像素化）或
限制导航链接的最大宽度。

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

1 个答案: