正确设置导航菜单？

Question

我正在尝试让我的导航菜单文本像真实网站那样在徽标旁边并排放置。我制作了侧面模型以供参考，以供查看。

我一直在为这个简单平凡的任务而强调自己，弄乱边距、填充、浮动等，无论我对我的任何元素做什么，要么什么都没有发生，要么就会开始一大堆狗屎满地飞，我也想不明白为什么。

My mockup Preview

How mine looks at present

/*The Main Background*/
body {
    background-image: url(../img/background.png);
    background-repeat: repeat-x
} 
.container {
    width: 960px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 100%;
    line-height: 1.5;
}
.HeaderBike{
    background-image: url(../img/HeaderBike.png);
    background-position: 260px 70px;
    background-repeat: no-repeat;
    height: 382px;
}

/* Nav Element */

/* Header Element */
.site-navigation li {
    height: 21px;
    width: 49px;
    margin-left: 35px;
    margin-right: 11px;
    float: left;
}
.site-navigation a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    float:left;
    text-align: center;
}
.site-navigation a:hover {
    padding-bottom: 2px;
    border-bottom: 1px solid white;
}

/* navmenu */
.navmenu{
    margin-top:15px;
    width: 490px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #fff;
}
.search{
    float: left; 
}
.SearchGlass{
    margin: 30px 900px;
    float: left;
}
h2 {
    line-height: 0.8;
    font-size: 72px;
    font-weight: bold;
    color: #fff;
    width: 450px;
    padding-bottom: 42px;
    float:left; 
    text-align: left;
}
h1{
  
}

/* Class For Articles*/
.article{
    float: left;
    width: 100%;
    margin-bottom: 72px
}
.article img{
    width: 400px;
    height: 225px;
    margin-right: 1%
}
.article h1{
    float:left;
    width: 70%;
    margin: 5px 0;
    text-align: left;
    font-weight: bold;
    font-size: 22.5px;
}
.article p{
    float:left;
    width: 70%;
    margin: 5px 0;
    text-align: left;
    font-weight: bold;
    font-size: 12px;
}
footer{
    display: block;
    width: 100%;
    float: left;
}

<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="utf-8">
    <title>Assignment3</title>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    
    <!--[if lt IE 9]>
     <script src="js/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <header class="Team Sky">
          <img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
          <nav class="site-navigation">
            <ul class="clearfix navmenu">
              <li><a href="#">shop</a></li>
              <li><a href="#">checkout</a></li>
              <li><a href="#">video</a></li>
              <li> 
                <form class="search">
                    <input id="search" type="text" name="search" placeholder="search">
                </form>  
              </li>
            </ul>
          </nav>
          <div id="HeaderBike" class="HeaderBike">
            <div>
              <h1>Team Sky</h1>
              <P>the road to yellow</P>   
            </div>                    
      </div>        
 </header>

Answer 1

要么您没有发布解决方案所需的代码，要么您的 html 中有一些缩进错误。

<body>
<div class="container">
    <header class="Team Sky">
        <img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
        <nav class="site-navigation">
            <ul class="clearfix navmenu">
                <li><a href="#">shop</a></li>
                <li><a href="#">checkout</a></li>
                <li><a href="#">video</a></li>
                <li> 
                    <form class="search">
                    <input id="search" type="text" name="search" placeholder="search">
                    </form>  
                </li>
            </ul>
        </nav>
    <div id="HeaderBike" class="HeaderBike"> <--- open never closed
        <div>
        <h1>Team Sky</h1>
        <P>the road to yellow</P>   
        </div>
    </header> <--- this was after div that goes next                    
</div>

Answer 2

在行块中显示您的列表项。

/*The Main Background*/

body {
  background-image: url(../img/background.png);
  background-repeat: repeat-x
}

.container {
  width: 960px;
  margin: 0 auto;
  font-family: 'Montserrat', sans-serif;
  font-size: 100%;
  line-height: 1.5;
}

.HeaderBike {
  background-image: url(../img/HeaderBike.png);
  background-position: 260px 70px;
  background-repeat: no-repeat;
  height: 382px;
}


/* Nav Element */


/* Header Element */

.site-navigation li {
  height: 21px;
  width: 49px;
  margin-left: 35px;
  margin-right: 11px;
  float: left;
}

.site-navigation a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  float: left;
  text-align: center;
}

.site-navigation a:hover {
  padding-bottom: 2px;
  border-bottom: 1px solid white;
}


/* navmenu */

.navmenu {
  margin-top: 15px;
  width: 490px;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  color: #fff;
}

.navmenu li {
display: inline-block;
}

.search {
  float: left;
}

.SearchGlass {
  margin: 30px 900px;
  float: left;
}

<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8">
  <title>Assignment3</title>
  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="css/reset.css">
  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
 <![endif]-->
</head>

<body>
  <div class="container">
    <header class="Team Sky">
      <img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
      <nav class="site-navigation">
        <ul class="clearfix navmenu">
          <li><a href="#">shop</a></li>
          <li><a href="#">checkout</a></li>
          <li><a href="#">video</a></li>
          <li>
            <form class="search">
              <input id="search" type="text" name="search" placeholder="search">
            </form>
          </li>
        </ul>
      </nav>
      <div id="HeaderBike" class="HeaderBike">
        <div>
          <h1>Team Sky</h1>
          <P>the road to yellow</P>
        </div>
      </div>
    </header>

Answer 3

一个简单的方法是将您的 header 分成 3 列，然后将您的徽标、导航和搜索字段放入每个部分。

我在下面包含了一个示例：

.clearfix {
  overflow: auto;
}

.header__section {
  float: left;
  width: 30%;
  margin-right: 5%;
}
.header__section:last-child {
  margin-right: 0;
}

<header class="header clearfix">
  <section class="header__section">
    Logo
  </section>
  <section class="header__section">
    Nav
  </section>
  <section class="header__section">
    Search
  </section>
</header>

正确设置导航菜单？

Setting up navigational menu properly?

html

css

header

nav