如何將導航欄擴展到屏幕邊緣？

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在技術上填充了寬度。 您可以做的一件事是向nav-bar添加flex並將導航按鈕分開。

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

如果您想要的按鈕來為更寬的，而不只是攤開，你可以只添加flex到每台的a標簽。

.nav-bar {
  display: flex;
}

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

如何將導航欄擴展到屏幕邊緣？

問題描述

1 個解決方案

解決方案1
1 2018-10-01 05:20:06

如何將導航欄擴展到屏幕邊緣？

問題描述

1 個解決方案

解決方案1 1 2018-10-01 05:20:06

解決方案1
1 2018-10-01 05:20:06