Question

我在网站http://rushycreekfarm.com.au/上有一个导航栏，我想将该导航栏扩展到屏幕边缘（显示为CONTACT的右侧）。我可以简单地将h3元素的padding-right设置为360px。但这仅适用于笔记本电脑/台式机的全屏显示。我如何才能更有效地做到这一点？

`<!DOCTYPE html>
<html>
<head>
  <title>Rushy Creek Farm</title>
  <link href="style.css" type="text/css" rel="stylesheet">
</head>
<body>
  <div id="details" class="header">765 Brockman Highway | 0438695434 | tracyrob@wallworks.com.au
  </div>
  <div class="title">
    <h1>Rushy Creek Farm</h1>
  </div>
  <div class="nav-bar">
    <a href="./index.html">HOME</a>
    <a href="./index.html">ABOUT</a>
    <a href="https://www.stayz.com.au/accommodation/wa/south- 
   west/augusta/9189326">BOOK</a>
    <a href="#details">CONTACT</a>
    <h3 style="padding-right: 360px"></h3>
  </div>
  <img id="arrow-left" class="arrow" src="./arrow-left.jpg">
  <img id="main-image" src="./images/droneshotcrop.jpg">
  <img id="arrow-right" class="arrow" src="./arrow-right.jpg">
  <script src="script.js" type="text/javascript"></script>
</body>
<html>
`

Answer 1

您的nav-bar似乎在填充宽度。您可以做的一件事是将flex添加到nav-bar并按一下导航键。

.nav-bar {
  display: flex;
  flex: 1;
  justify-content: space-evenly;
}

如果您希望按钮更宽而不是仅散开，则可以向每个flex标签添加a。

.nav-bar {
  display: flex;
}

.nav-bar a {
  display: flex;
  flex: 1;
}

如何将导航栏扩展到屏幕边缘？

1 个答案: