gpt4 book ai didi

html - 如何将导航栏扩展到屏幕边缘?

转载 作者:可可西里 更新时间:2023-11-01 13:42:40 25 4
gpt4 key购买 nike

我的网站上有一个导航栏 http://rushycreekfarm.com.au/我想延伸到屏幕的边缘(在它说联系的地方的右边)。我可以简单地将 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>
`

最佳答案

从技术上讲,您的 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;
}

关于html - 如何将导航栏扩展到屏幕边缘?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52583524/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com