我想缩小“定价”，“工作原理”和“功能”之间的距离，如您所见，here
我也知道我可以保证金做到这一点，但是我尝试了许多不同的方法，但是我不介意如何做到这一点，因此，如果您能帮我一个忙，那就太好了。< / p>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Product Page</title>
<style type="text/css">
body{
background: #eee;
font-family: 'Lato', sans-serif;
}
#header-img{
float: left;
width:18.5em;
margin:15px 32px 0px 5px;
}
.nav-link{
position: relative;
float:right;
padding: 24px 40px 15px 20px;
}
#hero{
margin-top: 90px;
text-align: center;
}
#header{
overflow: hidden;
}
#email{
max-width: 275px;
width: 100%;
box-sizing: border-box;
padding:5px;
}
#form{
text-align: -webkit-center;
display: flex;
flex-direction: column;
}
.btn{
margin-top:13px;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 150px;
width: 100%;
height: 30px;
background-color: #f1c40f;
padding: 0 20px;
font-size: 1em;
font-weight: 900;
text-transform: uppercase;
border: 3px;
border-radius: 2px;
cursor: pointer;
}
.flex{
display:flex;
margin-top: 80px;
}
.icon{
display: flex;
align-items: center;
justify-content: center;
height: 125px;
width: 20vw;
color: darkorange;
}
.desc{
display: flex;
flex-direction: column;
justify-content: unset;
height: 125px;
width: 80vw;
padding: 41px 0px 0px 0px;
text-align: start;
}
.eighttwo, p{
padding: 0;
margin: 0;
}
.divisor{
margin-top: -40px;
}
.container{
width:100%;
max-width: 1000px;
}
a{
text-decoration: none;
color: #000;
}
#nav-bar{
display: flex;
background: #eee;
flex-direction: row;
}
@media screen and (max-width: 410px) {
#nav-bar {
display: flex;
flex-direction: column-reverse;
align-items: center;
text-align: center;
margin-top: 30px;
padding: 0 50px;
}
}
</style>
</head>
<body>
<header id="header">
<nav class="navbar fixed-top" id="nav-bar">
<img src="trombones.jpg" id="header-img">
<a class="nav-link" href="#pricing">Pricing</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="#features">Features</a>
</nav>
</header>
<div id="hero">
<h2>Handcrafted, home-made masterpieces</h2>
</div>
<form id="form">
<input id="email" type="email" placeholder="Enter your email address" required>
<input id="submit" type="submit" value="Get Started" class="btn">
<div class="container">
<section id="features">
<div class="flex two">
<div class="icon">
<i class="fa fa-3x fa-fire"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Premium Materials</h2>
<p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
</div>
</div>
<div class="flex divisor">
<div class="icon">
<i class="fa fa-3x fa-truck"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Fast Shipping</h2>
<p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
</div>
</div>
<div class="flex divisor">
<div class="icon">
<i class="fa fa-3x fa-battery-full"></i>
</div>
<div class="desc">
<h2 class="eighttwo">Quality Assurance</h2>
<p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
</div>
</div>
</section>
</div>
<section id="how-it-works">
<iframe width="560" height="315" src="https://www.youtube.com/embed/y8Yv4pnO7qc" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
</section>
</form>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
答案 0 :(得分：0)
如果将justify-content: space-between;用于伸缩容器，并在第一个链接上使用margin-left: auto;，则链接将在其大小和填充允许的范围内向右移动-参见下文。 （顺便说一句：删除float: left-对弹性项目无效）
#nav-bar {
display: flex;
background: #eee;
flex-direction: row;
justify-content: space-between;
}
.nav-link {
padding: 24px 40px 15px 20px;
}
.nav-link:first-of-type {
margin-left: auto;
}<nav class="navbar fixed-top" id="nav-bar">
<img src="trombones.jpg" id="header-img">
<a class="nav-link" href="#pricing">Pricing</a>
<a class="nav-link" href="#how-it-works">How It Works</a>
<a class="nav-link" href="#features">Features</a>
</nav>