我在设置公司徽标（构建为h1和引用）与我的顶部导航栏位于同一行时遇到问题。事情并不想重叠，我可以将它设置在topnav的上方或下方。是否有一种方法可以在左侧设置徽标（在代码中＆＃39; s div id =＆＃34; logo-holder＆＃34;），同时保持topnav在同一位置？
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Crimson+Text:600,600i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ramaraja" rel="stylesheet">
<title>Welcome</title>
</head>
<body>
<div id="logo-holder">
<h1 id="logo"><a href="#" title="Company Name">Company Name</a></h1>
<p id="quote">Free Website CSS Template</p>
</div>
<div class="topnav">
<ul>
<li><em><a href="#home" style="text-decoration:none">Home</a></em></li>
<li><em><a href="#aboutus" style="text-decoration:none">About Us</a></em></li>
<li><em><a href="#services" style="text-decoration:none">Services</a></em></li>
<li><em><a href="#solutions" style="text-decoration:none">Solutions</a></em></li>
<li><em><a href="#support" style="text-decoration:none">Support</a></em></li>
<li><em><a href="#partners" style="text-decoration:none">Partners</a></em></li>
<li><em><a href="#contact" style="text-decoration:none">Contact</a></em></li>
</ul>
</div>
<div class="welcome">
<header>
<h1><em>welcome</em></h1>
<h2 id="lorem">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h2>
</header>
</div>
<div class="grid">
<div id="t1">
<h2 id="title"><em>Who Are We?</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting <a href="https://templated.co/">Website CSS Templates</a>, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="t2">
<h2 id="title"><em>What We Do?</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="t3">
<h2 id="title"><em>Latest Projects</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting <a href="https://templated.co/">Website CSS Templates</a>, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="ostatnie">
<div id="t4">
<h2 id="title"><em>Some Title</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged <a href="https://templated.co/">Website CSS Templates</a>. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="t5">
<h2 id="title"><em>Some Title</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown <a href="https://templated.co/">Website CSS Templates</a> printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typeset</p>
</div>
</div>
<footer>
<div id="footer-links" class="left">
<p>
<a href="#" title="Home">home</a>
<a href="#" title="About Us">about us</a>
<a href="#" title="Services">services</a>
<a href="#" title="Solutions">solutions</a>
<a href="#" title="Support">support</a>
<a href="#" title="Partners">partners</a>
<a href="#" title="Contact">contact</a>
</p>
</div>
<div class="cl"><p>© Copyright Site Name</p>
</div>
</footer>
</body>{{1}}＆＃13;
答案 0 :(得分：0)
您可以使用display: table和display: table-cell属性来达到您的要求。试试这段代码。
<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Crimson+Text:600,600i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ramaraja" rel="stylesheet">
<title>Welcome</title>
</head>
<body>
<div class="header">
<div id="logo-holder">
<h1 id="logo"><a href="#" title="Company Name">Company Name</a></h1>
<p id="quote">Free Website CSS Template</p>
</div>
<div class="topnav">
<ul>
<li><em><a href="#home" style="text-decoration:none">Home</a></em></li>
<li><em><a href="#aboutus" style="text-decoration:none">About Us</a></em></li>
<li><em><a href="#services" style="text-decoration:none">Services</a></em></li>
<li><em><a href="#solutions" style="text-decoration:none">Solutions</a></em></li>
<li><em><a href="#support" style="text-decoration:none">Support</a></em></li>
<li><em><a href="#partners" style="text-decoration:none">Partners</a></em></li>
<li><em><a href="#contact" style="text-decoration:none">Contact</a></em></li>
</ul>
</div>
</div>
<div class="welcome">
<header>
<h1><em>welcome</em></h1>
<h2 id="lorem">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h2>
</header>
</div>
<div class="grid">
<div id="t1">
<h2 id="title"><em>Who Are We?</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting <a href="https://templated.co/">Website CSS Templates</a>, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="t2">
<h2 id="title"><em>What We Do?</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="t3">
<h2 id="title"><em>Latest Projects</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting <a href="https://templated.co/">Website CSS Templates</a>, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="ostatnie">
<div id="t4">
<h2 id="title"><em>Some Title</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged <a href="https://templated.co/">Website CSS Templates</a>. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="t5">
<h2 id="title"><em>Some Title</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown <a href="https://templated.co/">Website CSS Templates</a> printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typeset</p>
</div>
</div>
<footer>
<div id="footer-links" class="left">
<p>
<a href="#" title="Home">home</a>
<a href="#" title="About Us">about us</a>
<a href="#" title="Services">services</a>
<a href="#" title="Solutions">solutions</a>
<a href="#" title="Support">support</a>
<a href="#" title="Partners">partners</a>
<a href="#" title="Contact">contact</a>
</p>
</div>
<div class="cl"><p>© Copyright Site Name</p>
</div>
</footer>
</body>
body {
background-color: #ffffff;
margin: 0px;
display: grid;
}
.header {
display: table;
width: 100%;
background-color: #e6e6e6;
vertical-align: middle;
}
#logo-holder {
display: table-cell;
vertical-align: middle;
}
.topnav {
display: table-cell;
}
#logo-holder {
}
#logo-holder h1#logo a {
font-size: 22px;
font-weight: normal;
color: #000;
line-height: 1;
font-style: italic;
text-decoration: none;
display: block;
}
#logo-holder p#quote {
font-size: 10px;
color: #777;
line-height: 3px;
padding-left: 3px;
letter-spacing: 0.12em;
}
ul {
list-style-type: none;
margin: 0;
padding: 20px;
padding-bottom: 40px;
overflow: hidden;
background-color: #e6e6e6;
text-align: right;
color: #dfbf9f;
}
li {
display: inline-block;
}
li a {
display: block;
color: #999999;
text-align: center;
padding: 14px 30px;
text-decoration: none;
font-weight: bold;
font-size: 24px;
}
li a:hover {
border-radius: 10px;
background-color: #d9d9d9;
}
li a:visited {
background-color: #d9d9d9 !important;
}
.welcome {
background: linear-gradient(to bottom, #01aef0 45%, #0090d7 100%);
padding: 50px;
margin: 0px;
padding-top: 20px;
}
h1 {
color: #ffffff;
font-size: 5em;
font-family: 'Crimson Text', serif;
letter-spacing: 5px;
margin-bottom: 10px;
margin-top: 0;
}
h2 {
margin: 0;
color: #000000;
font-style: italic;
font-size: 2em;
font-family: 'Ramajana', serif;
}
#lorem {
color: #80dfff !important;
-webkit-margin-start: 15px;
-webkit-margin-end: 15px;
-webkit-margin-before: -15px;
-webkit-margin-after: 10px;
font-family: 'Crimson Text', serif;
font-weight:300;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 50px;
grid-column-gap: 30px;
padding: 0px;
margin-left: 100px;
margin-right: 100px;
margin-top: 75px;
font-family: 'Ramajana', serif;
}
.description {
font-size: 19px;
color: #808080;
}
#title {
font-size: 38px;
font-weight: 700;
font-family: 'Ramajana', serif;
}
.ostatnie {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 20px;
grid-column-gap: 30px;
padding: 0px;
margin-left: 100px;
margin-right: 100px;
margin-top: 30px;
margin-bottom: 50px;
}
footer {
background-color: #f2f2f2;
text-align: left;
padding: 10px 0 2px 0;
margin-bottom: 50px;
display: inline-block;
width: 100%;
height: 75%;
color: #999999;
font-size: 17px;
font-family: Verdana, sans-serif;
float: left;
}
#footer-links {
padding: 0px 0px 0px 0;
text-decoration: none;
color: #dfbf9f;
}
#footer-links p a {
padding-right: 10px;
padding-left: 30px;
text-decoration: none;
color: #808080;
margin-left: 50px;
}
.cl {
margin: 5px 0 0 80px;
}
答案 1 :(得分：0)
我使用flex来解决你的问题。我希望这会有用。 我添加了一个带有“容器”类的div来包含div logo-holder和div topnav。
body {
background-color: #ffffff;
margin: 0px;
display: grid;
}
.container{
display: flex;
flex-direction: row;
justify-content: space-between;
background-color: #e6e6e6;
}
#logo-holder {
float: left;
display: inline;
background-color: #ffffff;
}
#logo-holder h1#logo a {
font-size: 22px;
font-weight: normal;
color: #000;
line-height: 1px;
font-style: italic;
text-decoration: none;
padding-top: 200px;
}
#logo-holder p#quote {
font-size: 10px;
color: #777;
line-height: 3px;
padding-left: 3px;
letter-spacing: 0.12em;
}
ul {
list-style-type: none;
margin: 0;
padding: 20px;
padding-bottom: 40px;
overflow: hidden;
background-color: #e6e6e6;
text-align: right;
color: #dfbf9f;
}
li {
display: inline-block;
}
li a {
display: block;
color: #999999;
text-align: center;
padding: 14px 30px;
text-decoration: none;
font-weight: bold;
font-size: 24px;
}
li a:hover {
border-radius: 10px;
background-color: #d9d9d9;
}
li a:visited {
background-color: #d9d9d9 !important;
}
.welcome {
background: linear-gradient(to bottom, #01aef0 45%, #0090d7 100%);
padding: 50px;
margin: 0px;
padding-top: 20px;
}
h1 {
color: #ffffff;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
font-size: 5em;
-webkit-margin-start: 15px;
-webkit-margin-end: 15px;
font-family: 'Crimson Text', serif;
letter-spacing: 5px;
margin-bottom: 10px;
}
h2 {
margin: 0;
color: #000000;
font-style: italic;
font-size: 2em;
font-family: 'Ramajana', serif;
}
#lorem {
color: #80dfff !important;
-webkit-margin-start: 15px;
-webkit-margin-end: 15px;
-webkit-margin-before: -15px;
-webkit-margin-after: 10px;
font-family: 'Crimson Text', serif;
font-weight:300;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-row-gap: 50px;
grid-column-gap: 30px;
padding: 0px;
margin-left: 100px;
margin-right: 100px;
margin-top: 75px;
font-family: 'Ramajana', serif;
}
.description {
font-size: 19px;
color: #808080;
}
#title {
font-size: 38px;
font-weight: 700;
font-family: 'Ramajana', serif;
}
.ostatnie {
display: grid;
grid-template-columns: 2fr 1fr;
grid-gap: 20px;
grid-column-gap: 30px;
padding: 0px;
margin-left: 100px;
margin-right: 100px;
margin-top: 30px;
margin-bottom: 50px;
}
footer {
background-color: #f2f2f2;
text-align: left;
padding: 10px 0 2px 0;
margin-bottom: 50px;
display: inline-block;
width: 100%;
height: 75%;
color: #999999;
font-size: 17px;
font-family: Verdana, sans-serif;
float: left;
}
#footer-links {
padding: 0px 0px 0px 0;
text-decoration: none;
color: #dfbf9f;
}
#footer-links p a {
padding-right: 10px;
padding-left: 30px;
text-decoration: none;
color: #808080;
margin-left: 50px;
}
.cl {
margin: 5px 0 0 80px;
}<!DOCTYPE html>
<html>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Crimson+Text:600,600i,700,700i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ramaraja" rel="stylesheet">
<title>Welcome</title>
</head>
<body>
<div class="container">
<div id="logo-holder">
<h1 id="logo"><a href="#" title="Company Name">Company Name</a></h1>
<p id="quote">Free Website CSS Template</p>
</div>
<div class="topnav">
<ul>
<li><em><a href="#home" style="text-decoration:none">Home</a></em></li>
<li><em><a href="#aboutus" style="text-decoration:none">About Us</a></em></li>
<li><em><a href="#services" style="text-decoration:none">Services</a></em></li>
<li><em><a href="#solutions" style="text-decoration:none">Solutions</a></em></li>
<li><em><a href="#support" style="text-decoration:none">Support</a></em></li>
<li><em><a href="#partners" style="text-decoration:none">Partners</a></em></li>
<li><em><a href="#contact" style="text-decoration:none">Contact</a></em></li>
</ul>
</div>
</div>
<div class="welcome">
<header>
<h1><em>welcome</em></h1>
<h2 id="lorem">Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</h2>
</header>
</div>
<div class="grid">
<div id="t1">
<h2 id="title"><em>Who Are We?</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting <a href="https://templated.co/">Website CSS Templates</a>, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="t2">
<h2 id="title"><em>What We Do?</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="t3">
<h2 id="title"><em>Latest Projects</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting <a href="https://templated.co/">Website CSS Templates</a>, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
<div class="ostatnie">
<div id="t4">
<h2 id="title"><em>Some Title</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged <a href="https://templated.co/">Website CSS Templates</a>. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div id="t5">
<h2 id="title"><em>Some Title</em></h2>
<p class="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown <a href="https://templated.co/">Website CSS Templates</a> printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typeset</p>
</div>
</div>
<footer>
<div id="footer-links" class="left">
<p>
<a href="#" title="Home">home</a>
<a href="#" title="About Us">about us</a>
<a href="#" title="Services">services</a>
<a href="#" title="Solutions">solutions</a>
<a href="#" title="Support">support</a>
<a href="#" title="Partners">partners</a>
<a href="#" title="Contact">contact</a>
</p>
</div>
<div class="cl"><p>© Copyright Site Name</p>
</div>
</footer>
</body>