我正在尝试构建一个简单的网页。它的左上角有一个徽标，右边的同一行是一个导航栏。一切正常。问题是，我想在徽标＆amp;导航栏（全宽）。无论我尝试什么，文本都与徽标和导航栏位于同一行。如何强制文字从徽标＆amp;下面开始？导航栏？
这是html：
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="Temp.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="logo" style="display:inline;">
<a href="Temp.html">
<img src="robert-half-technology-logo-600(40).gif"/>
</a>
</div>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#" style="color:black;">Home</a></li>
<li><a href="Temp_AboutUs.html" style="color:black;">About Us</a></li>
<li><a href="Temp_Careers.html" style="color:black;">Careers</a></li>
<li><a href="Temp_ContactUs.html" style="color:black;">Contact Us</a></li>
</ul>
</div><br/><br/>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>About Us</h1>
<p class="normaltext">
Founded in 1948, Robert Half has a long company history of innovation, always guided by high ethical standards and the belief that finding the right fit for a client and candidate creates an engaged and energized workforce.
</p>
<p class="normaltext">
We pioneered the idea of professional staffing services nearly 70 years ago and, as the needs of businesses have evolved, so have we. In 1986, when current leadership acquired the Robert Half business from founder Bob Half, the staffing industry was much different than it is today. Our leadership team saw potential in moving toward a more specialized staffing approach and began placing temporary workers at higher skill levels. Our clients and candidates found value in professional-level staffing, which is why we launched a series of temporary professional staffing divisions in the finance and accounting, legal, creative and marketing, technology and administrative fields. And in 2002, we again saw opportunity and introduced Protiviti, a global independent risk consulting and internal audit service, to support companies as they faced more stringent financial reporting and disclosure practices under new regulations such as Sarbanes-Oxley.
</p>
<p class="normaltext">
Explore Robert Half’s history, learn about our leadership and accolades and see how we have found opportunity in innovation to create a $5 billion professional services organization.
</p>
<h2>1940s: The beginning</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1948</td>
<td>Robert Half founded by Bob and Maxine Half.</td>
</tr>
</table>
<h2>1960s: High ethical standards become a cornerstone</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1963</td>
<td style="padding-left:20px;">Bob Half speaks out against discriminatory recruiting and staffing practices in a letter to the Association of Personnel Agencies of New York.</td>
</tr>
</table>
<h2>1970s: A decade of firsts</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1973</td>
<td style="padding-left:20px">Robert Half opens its first international location in London.</td>
</tr>
<tr>
<td>1973</td>
<td style="padding-left:20px;">Accountemps, the first of many professional staffing divisions, is launched, thus beginning Robert Half’s specialized approach to temporary staffing.</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
这就是css：
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
.logo {
position: fixed;
z-index: 2000;
}
.video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX (-50%) translateY(-50%);
}
h1 {
text-align:center;
color:#a01b35;
}
.normaltext {
font-size: 18px;
font-family: "Futura BT W01 Book",OpenSansRegular,"Open Sans Regular",sans-serif;
line-height: 1.25;
}
答案 0 :(得分：1)
这是因为您使用固定的导航栏和徽标，因此它位于您下方容器的顶部。
只需将margin-top应用于.container类，将top：0应用于.logo类：
.container {
margin-top: 50px; //use what ever you need here for spacing.
}
.logo {
position: fixed;
top: 0;
z-index: 2000;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
.logo {
position: fixed;
z-index: 2000;
}
.video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX (-50%) translateY(-50%);
}
h1 {
text-align:center;
color:#a01b35;
}
.normaltext {
font-size: 18px;
font-family: "Futura BT W01 Book",OpenSansRegular,"Open Sans Regular",sans-serif;
line-height: 1.25;
}
.container {
margin-top: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="Temp.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="logo" style="display:inline;">
<a href="Temp.html">
<img src="robert-half-technology-logo-600(40).gif"/>
</a>
</div>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<ul class="nav navbar-nav pull-right">
<li class="active"><a href="#" style="color:black;">Home</a></li>
<li><a href="Temp_AboutUs.html" style="color:black;">About Us</a></li>
<li><a href="Temp_Careers.html" style="color:black;">Careers</a></li>
<li><a href="Temp_ContactUs.html" style="color:black;">Contact Us</a></li>
</ul>
</div><br/><br/>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8">
<h1>About Us</h1>
<p class="normaltext">
Founded in 1948, Robert Half has a long company history of innovation, always guided by high ethical standards and the belief that finding the right fit for a client and candidate creates an engaged and energized workforce.
</p>
<p class="normaltext">
We pioneered the idea of professional staffing services nearly 70 years ago and, as the needs of businesses have evolved, so have we. In 1986, when current leadership acquired the Robert Half business from founder Bob Half, the staffing industry was much different than it is today. Our leadership team saw potential in moving toward a more specialized staffing approach and began placing temporary workers at higher skill levels. Our clients and candidates found value in professional-level staffing, which is why we launched a series of temporary professional staffing divisions in the finance and accounting, legal, creative and marketing, technology and administrative fields. And in 2002, we again saw opportunity and introduced Protiviti, a global independent risk consulting and internal audit service, to support companies as they faced more stringent financial reporting and disclosure practices under new regulations such as Sarbanes-Oxley.
</p>
<p class="normaltext">
Explore Robert Half’s history, learn about our leadership and accolades and see how we have found opportunity in innovation to create a $5 billion professional services organization.
</p>
<h2>1940s: The beginning</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1948</td>
<td>Robert Half founded by Bob and Maxine Half.</td>
</tr>
</table>
<h2>1960s: High ethical standards become a cornerstone</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1963</td>
<td style="padding-left:20px;">Bob Half speaks out against discriminatory recruiting and staffing practices in a letter to the Association of Personnel Agencies of New York.</td>
</tr>
</table>
<h2>1970s: A decade of firsts</h2>
<table style="width:100%" class="normaltext">
<tr>
<td>1973</td>
<td style="padding-left:20px">Robert Half opens its first international location in London.</td>
</tr>
<tr>
<td>1973</td>
<td style="padding-left:20px;">Accountemps, the first of many professional staffing divisions, is launched, thus beginning Robert Half’s specialized approach to temporary staffing.</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分：1)
为容器提供margin-top，尽可能容纳Header高度并给出top：0px css to .logo class。
.container {
width: 1170px;
margin-top: 100px;
}
.logo{
position: fixed;
z-index: 2000;
top: 0px;
}