我在将公司 Logo (构建为 h1 和引号)设置在顶部导航栏所在的同一行时遇到问题。事情不想重叠，我可以将它设置在 topnav 的灰色条上方或下方。有没有一种简单的方法可以在左侧设置 Logo (在代码中是 div id="logo-holder")，同时将顶部导航保持在同一位置？
body {
background-color: #ffffff;
margin: 0px;
display: grid;
}
#logo-holder {
float: left;
display: inline;
}
#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 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>最佳答案
您可以使用 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;
}
关于html - 公司名称与topnav在同一行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49791919/