移动导航栏中的链接位置

Question

我正试图在@media下的标题navbar中移动内容，以使我的网站做出响应。我正在修补一堆东西，但我碰到了一堵墙。

我正在尝试将当前未间隔开的标题navbar链接隔开，并且我还试图将订阅栏移动到navbar内的最右侧。

由于我一直在修改一些东西，我可能在不应该有的地方有多余的代码，如果是这样，请告诉我，这样我就可以了解移动项目的功能以及我将来应该避免什么。

* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
height: 100px;
display: flex;
padding: 10px 0 30px 10px;
}
.header-logo img {
height: 100px;
padding: 10px 0px 10px 10px;
float: left;
}
header nav ul {
display: block;
margin: 50px 0 0 auto;
padding: 0 0 0 10px;
width: fit-content;
}
header nav ul li {
display: inline-block;
padding: 0 5px;
}
header nav ul li a {
font-family: 'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.home-link {
float: right;
padding: 0 0 0 0px;
}
.sub {
display: none;
background-color: rgb(70, 149, 223);
margin-left: 5%;
height: auto;
list-style: none;
}
/* HAMBURGER MENU */
.nav div {
height: 4px;
background-color: rgb(20, 15, 15);
margin: 5px 0;
border-radius: 25px;
transition: 0.3s;
}
.nav {
width: 30;
display: block;
float: right;
margin: 1em 0 0 1em;
padding-right: 0px;
}
.one {
width: 30px;
}
.two {
width: 20px;
}
.three {
width: 25px;
}
.nav:hover div {
width: 30px;
}
#hamburger {
display: none;
list-style: none;
}
.hamburger-toggle {
float: right;
padding: 25px 0px 0px 125px;
}
ul li a:hover {
color: rgb(255, 255, 255);
}
/* Desktop Media */
@media only screen and (min-width: 1000px) {
header .header-logo {
float: left;
padding: 10px 10px 10px 10px;
height: auto;
width: 220px;
display: table;
}
header nav ul {
margin: 0 auto;
padding-right: 50px;
}
header nav ul li {
padding: 0 0 0 50px;
}
header nav ul li a {
line-height: 150px;
font-family: 'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
padding: 0 0 0 50px;
}
header .sub {
display: block;
font-family: 'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
line-height: 50px;
border: 2px solid #111;
float: right;
padding: 2px 20px;
}
.sub {
margin-left: auto;
height: auto;
position: relative;
z-index: 1000;
width: fit-content;
height: 40px;
background-color: rgb(70, 149, 223);
}
.index-banner {
width: 100%;
height: calc(100vh - 100px);
max-width: 1080px;
margin-right: auto;
margin-left: auto;
background-image: url('img/road_trip.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.index-banner h1 {
display: block;
padding: 120px 0 0px 120px;
font-family: 'Karma', serif;
font-size: 60px;
font-weight: 900;
color: #fff;
text-shadow: 4px 4px 16px #111;
}
.verticial-center {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
padding: 120px 0 0 0;
}
.nav {
display: none;
}
#hamburger {
display: flex;
line-height: 150px;
font-family: 'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
}
.hamburger-toggle {
display: none;
}
}
/*INDEX*/
.index-banner {
width: 100%;
height: calc(100vh - 100px);
background-image: url('img/road_trip.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.index-banner h1 {
padding-top: 30px;
font-family: 'Karma', serif;
font-size: 60px;
font-weight: 900;
line-height: 70px;
color: #fff;
text-align: center;
text-shadow: 4px 4px 16px #111;
}
.verticial-center {
margin: 0 auto;
display: table-cell;
vertical-align: middle;
}
/* HERO SECTION */
.hero-section {
font-family: 'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
width: 100%;
max-width: 1080px;
/* or whatever width you want */
margin-right: auto;
margin-left: auto;
}
.hero-section {
font-family: 'Karma', serif;
font-size: 40px;
color: #111;
text-align: center;
padding: 25px;
}
.hero-paragraph {
margin: 0 auto;
max-width: 100%;
font-family: 'Sorts Mill Goudy', serif;
font-size: 24px;
color: #111;
text-align: center;
padding: 25px;
}
/* RESPONSIVNESS */
@media only screen and (min-width: 1000px) {
.wrapper {
width: 100%;
margin: 0 auto;
}
.index-banner {
height: 500px;
}
.hero-paragraph {
width: 100%;
margin: 0 auto;
}
.hero-section {
width: 100%;
margin: 0 auto;
}
}
/* BLOG PAGE */
.body-wrapper {
width: 100%;
max-width: 1080px;
/* or whatever width you want */
margin-right: auto;
margin-left: auto;
padding-top: 50px;
}
.blog-title {
font-family: 'Sorts Mill Goudy', serif;
font-size: 60px;
color: #111;
text-align: center;
display: block;
}
.blog-title div {
font-family: 'Karma', serif;
font-size: 40px;
color: #111;
padding: 60px;
width: 50%;
text-align: left;
}
.blog-title div h1 {
font-family: 'Karma', serif;
font-size: 40px;
color: #111;
text-align: center;
}
/* FOOTER */
footer {
width: calc(100% - 80px);
padding: 40px 40px;
margin-top: 20px;
background-color: #111;
overflow: hidden;
}
footer ul {
width: fit-content;
float: left;
padding-left: 20px;
}
footer ul li {
display: block;
list-style: none;
}
footer ul li a {
font-family: 'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
.footer-sm {
width: 50px;
float: right;
}
.footer {
font-family: 'Sorts Mill Goudy', serif;
font-size: 16px;
color: #fff;
text-align: center;
margin: 170px 0 0 0;
}
.footer-sm img {
width: 100%;
margin-bottom: 10px;
display: block;
}
/* FOOTER RESPONESIVNESS */
@media only screen and (min-width: 1000px) {
footer ul li a {
font-family: 'Sorts Mill Goudy', serif;
font-size: 18px;
color: #fff;
line-height: 40px;
}
}

<body>
<header>
<div class="header-logo">
<a href="index.html"> <img src="https://milestonehackers.com/img/Milestonehackers.jpg" alt="Milestonehackers logo"></a>
</div>
<nav div class="home-link">
<ul>
<li><a href="index.html">Home</a></li>
</ul>
</nav>
<nav>
<div class="hamburger-toggle">
<ul>
<a href="#" class="nav">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
<div id="hamburger">
<li><a href="podcasts.html">Podcast</a></li>
<li><a href="newsletter.html">Newsletter</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</div>
<div class="sub">
<li><a href="subscribe.html">Subscribe</a></li>
</div>
</a>
</ul>
</nav>
</header>
<main>
<section class="index-banner">
<div class="verticial-center">
<h1>The Milestone Hackers Podcast</h1>
</div>
</section>
<div class="wrapper">
<section class="hero-section">
<h2>What Can you Expect From our Podcast</h2>
<p class="hero-paragraph">A host (meee, Paolo) interviewing various types of entrepreneurs or founders both technical and non-technical. Each entrepreneur has their own unique story that resulted in learning or experiencing something that can benefit our audience who may
want to go down the entrepreneurial path!</p>
</section>
</div>
</main>
<div class="wrapper">
<footer>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="podcasts.html">Podcast</a></li>
<li><a href="newsletter.html">Newsletter</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="footer-sm">
<a href="https://twitter.com/Milestonehacker">
<img src="img/twitter.png" alt="twiiter icon">
<a href="https://open.spotify.com/show/2ZiIxv5Mr83seTtNsg3LD9">
<img src="img/spotify.png" alt="spotify icon">
<a href="https://anchor.fm/s/ecb81f4/podcast/rss"></a>
<img src="img/rss.png" alt="rss icon">
</a>
</div>
<p class="footer">Copyright &copy; 2019; All Rights Reserved</p>
</footer>

Answer 1

1. 显示时不要有大约100px的3000x3000px图像。对于这个尺寸，你的徽标最多应该是20kb，而不是742kb。

2. 除非你确定自己在做什么，否则不要使用float(或absolute(。Floats会混淆所有显示块的div。例如，您需要在页眉上设置一个高度，因为徽标是浮动的。

3. 开始勾画你的设计，把所有的东西都画成矩形。您不需要那么多元素来显示您的标题。

4. 如果你认为你的CSS很乱。去掉所有东西，重新开始，最好从上面的#3开始。

5. 我添加了CSS变量。有一个可以保持所有距离的余量总是很好的。也可以添加CCD_ 5。

:root {
--margin: 10px;
--margin-double: 20px;
}
* {
text-decoration: none;
}
body {
background-color: #f3f3f3;
}
header {
background-color: #fff;
width: 100%;
display: flex;
align-items: center;
padding: var(--margin-double);
box-sizing: border-box; /* take padding into account for width */
}
header > .header-logo > a {
display: flex; /* to remove weird spacing behavior in Firefox */
}
header > .header-logo img {
height: 100px;
padding-right: var(--margin);
}
header > nav {
flex: 1 1 auto; /* Take up any free space within <header> */
display: flex;
flex-wrap: wrap;
height: 100%;
}
@media (min-width: 700px) {
header > nav {
justify-content: center;  
}
}
header > nav > a {
margin-right: var(--margin);
font-family: 'Sorts Mill Goudy', serif;
font-size: 16px;
color: #111;
text-transform: uppercase;
line-height: 24px;
}
header > nav > a::before {
width: 100%;
height: 1px;
}
header > a.sub {
height: 20px;
padding: var(--margin);
align-self: end; /* I didn't know where you wanted the button */
background-color: rgb(70, 149, 223);
color: #fff;
}

<body>
<header>
<div class="header-logo">
<a href="index.html"><img src="https://milestonehackers.com/img/Milestonehackers.jpg" alt="Milestonehackers logo"></a>
</div>
<nav>
<a href="index.html">Home</a>
<a href="podcasts.html">Podcast</a>
<a href="newsletter.html">Newsletter</a>
<a href="blog.html">Blog</a>
<a href="contact.html">Contact</a>
</nav>
<a class="sub" href="subscribe.html">Subscribe</a>
</header>
</body>

Answer 2

使用bootstrap进行响应的最佳实践，因为它提供了n个组件，并且有很多实用程序类，所以您不需要在大多数地方编写自己的CSS有关实用程序类的详细信息，请查看此链接此处

Answer 3

下面是使用bootstrap的简单示例。

HTML:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

https://codepen.io/pgurav/pen/abbaOwW