我希望导航栏中的链接位于徽标旁边，并获得右边的另一个链接 - 它不在其他链接旁边 - 写入＆＃34;文本＆＃34;。我想对解决方案进行解释，因为如果我再次偶然发现它会对我有所帮助。我是stackoverflow btw的新手。
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden
}
header {
background-color: #191919;
position: fixed;
width: 100%;
float: left;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
}
header a {
text-decoration: none;
text-transform: uppercase;
color: #edf9ff;
}
a:hover {
color: blue;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
padding-right: 20px;
}
#showcase {
padding-top: 100px;
height: 750px;
width: 100%;
background-image: url(./images/BackgroundShowcase.jpg);
background-size: 100% 100%;
}
#showcase h2 {
font-size: 50px;
color: green;
text-align: center;
}
#showcase p {
font-size: 20px;
color: green;
text-align: center;
}
#slideshow {
position: relative;
top: 350px;
}
#slideshow .Slides {
width: 200px;
padding-right: 15%;
height: 200px;
}
.boxes {
margin-top: 50px;
margin-bottom: 50px;
}
.box {
width: 30%;
float: left;
text-align: center;
}
.box img {
width: 175px;
height: 150px;
}
footer {
background-color: #191919;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
clear: left;
}
footer p {
text-align: center;
color: white;
}<!doctype html>
<html>
<head>
<title>Mukhtar's Photography | Home </title>
<link href="Home.css" rel="stylesheet" />
<script type="application/javascript" src="Home.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a href="PhotoGallery.html">PHOTO GALLERY</a></li>
<li><a href="#">VIDEO GALLERY</a></li>
</ul>
</nav>
</header>
<section id="showcase">
<div class="container">
<h2>Photography</h2>
<p>Our photo's are always presente in the best quality possible with carefulness
</p>
</div>
</section>
<section class="boxes">
<div class="box">
<img src="./images/CameraIcon.png">
<h2>Photography</h2>
<p>Our photographers will always find the perfect photo whether it is a simple click to a full on video</p>
</div>
<div class="box">
<img src="./images/CommunityICON.jpg">
<h2>Guranteed!</h2>
<p>If you are not satisfied with our work you will have an 80% refund</p>
</div>
<div class="box">
<img src="./images/TimeIcon.png">
<h2>Time Managment</h2>
<p>Time management is a crucial step so we are always trying our best to finish up the work quickly, but surely</p>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>
答案 0 :(得分：0)
您可以简单地将徽标和导航包装在一个新元素（.d-inline-block）中，将其设置为display: inline-flex（将徽标和导航连成一行），然后在其中添加一个链接标题。由于标题为display: flex; justify-content: space-between;，徽标和导航将位于左侧的一个元素中，它将位于左侧，新的“文本”链接位于右侧。
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden
}
header {
background-color: #191919;
position: fixed;
width: 100%;
float: left;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
}
header a {
text-decoration: none;
text-transform: uppercase;
color: #edf9ff;
}
a:hover {
color: blue;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
padding-right: 20px;
}
#showcase {
padding-top: 100px;
height: 750px;
width: 100%;
background-image: url(./images/BackgroundShowcase.jpg);
background-size: 100% 100%;
}
#showcase h2 {
font-size: 50px;
color: green;
text-align: center;
}
#showcase p {
font-size: 20px;
color: green;
text-align: center;
}
#slideshow {
position: relative;
top: 350px;
}
#slideshow .Slides {
width: 200px;
padding-right: 15%;
height: 200px;
}
.boxes {
margin-top: 50px;
margin-bottom: 50px;
}
.box {
width: 30%;
float: left;
text-align: center;
}
.box img {
width: 175px;
height: 150px;
}
footer {
background-color: #191919;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
clear: left;
}
footer p {
text-align: center;
color: white;
}
.d-inline-flex {
display: inline-flex;
align-items: center;
}<!doctype html>
<html>
<head>
<title>Mukhtar's Photography | Home </title>
<link href="Home.css" rel="stylesheet" />
<script type="application/javascript" src="Home.js"></script>
</head>
<body>
<header>
<div class="d-inline-flex">
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li><a href="PhotoGallery.html">PHOTO GALLERY</a></li>
<li><a href="#">VIDEO GALLERY</a></li>
</ul>
</nav>
</div>
<a href="#">text</a>
</header>
<section id="showcase">
<div class="container">
<h2>Photography</h2>
<p>Our photo's are always presente in the best quality possible with carefulness
</p>
</div>
</section>
<section class="boxes">
<div class="box">
<img src="./images/CameraIcon.png">
<h2>Photography</h2>
<p>Our photographers will always find the perfect photo whether it is a simple click to a full on video</p>
</div>
<div class="box">
<img src="./images/CommunityICON.jpg">
<h2>Guranteed!</h2>
<p>If you are not satisfied with our work you will have an 80% refund</p>
</div>
<div class="box">
<img src="./images/TimeIcon.png">
<h2>Time Managment</h2>
<p>Time management is a crucial step so we are always trying our best to finish up the work quickly, but surely</p>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>