我的 http://rushycreekfarm.com.au/网站上有一个导航栏，我想将其扩展到屏幕边缘(在显示联系人的位置的右侧(。我可以简单地将 h3 元素的右填充设置为 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>
`
看来您的nav-bar在技术上正在填充宽度。您可以做的一件事是向nav-bar添加flex并留出导航按钮的间距。
.nav-bar {
display: flex;
flex: 1;
justify-content: space-evenly;
}
如果您希望按钮更宽而不是只是展开，您可以向每个a标签添加flex。
.nav-bar {
display: flex;
}
.nav-bar a {
display: flex;
flex: 1;
}