NavBar和搜索栏在同一行

时间：2017-12-05 02:05:10

标签： html css html5

所以我有这个项目，在那里我获得了一个网站的截图，并且在纯粹使用HTML和CSS代码时必须复制它。但是我已经陷入了一个困境，我的导航栏有多余的空间，我不想要，因为我想要一个搜索栏去多余的空间。

＆＃13;
＆＃13; 
html {
background-color: lightgrey;
font-size: 100%;
}

body{
  margin: 5%;
  margin-top: 0;
  font-family: Georgia, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif;

}

/* Navigation Bar*/
nav ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #e9eed0
}

#current a{
    background-color: #b8d03b;
    color: white;
}

.nav li {
  float: left;
  border-right: 1px solid #bbb
}

.nav li a {
  display: block;
  color: #8c8f7d;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* Search Bar */

.search {
  float: right;
}
 /* Heading */
.heading{
  background-color: #f6f6f6;
  border: 1px solid #b8d03b;
  border-bottom:.5px solid #b8d03b;
}

/* Main text area */

.main {
  display: block;
  background-color: #ffffff;
  color: grey;
  border: 1px solid #b8d03b;
  float: left;
}



.content{
  width: 50%;
  float: left;
  padding: 5px 15px;
}

.middle{
  width:30%;
  float: left;
  padding: 5px 15px;
  margin: 0px 5px 5px 5px;
}

.sidebar{
  width: 10%;
  padding: 5px 15px;
  float: left;
}


/* Calendar */
.october{
  text-align: center;
}
.weekdays {
    margin: 0;
    padding: 10px 0;
    background-color: #cccccc;
    text-align: center;
}

.weekdays li {
    display: inline-block;
    color: #ffffff;
    width: 10%;
    text-align: center;
}

.days {
    text-align: center;
    padding: 10px 0;
    background: #eee;
    margin: 0;
}

.days li {
    list-style-type: none;
    display: inline-block;
    width: 10%;
    text-align: center;
    margin-bottom: 5px;
    font-size:12px;
    color: #777;
}

.days li .active {
    color: #3c8cd7 !important
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title> Final Project </title>
<link rel="stylesheet" href="style.css">
</head>

<body>
  <header role='banner'>
    <nav>
      <ul class="nav">
        <li id="current"><a href="index.html">Home </a></li>
        <li><a href="ela.html">ELA</a> </li>
        <li><a href="photos.html"> Photos</a></li>
        <li> <a href="about.html">About</a></li>
        <li> <a href="contacts.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <div class="search">
    <form method="get" action="search-results.php" role="search">
      <label for="search"> Search: </label>
      <input type="search" size="30">
      <input type="submit" value="Search" />
  </div>
  <div class="heading">
  <p><span> News Flash</span> By Guillermo Molina </p>
  <p><small>>> Home</small></p>
</div>
<div class="main">


<article class="content">
  <p><small>posted on Novermber 16, 2017 by Guillermo Molina</small></p>
  <h1>About This Template</h1>
  <p><strong>News Flash</strong> Denec leo. Vivamus fermnetum nibh in augue.
  Praesent a lacus at erna congue rutrum. Nulla enim erosm porttitor eu, tempus
id, varius non, nib. Duis enim nula luctus eu, dapibus lacinia, venenatis id  quam.
 Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat.
</p>

<p>Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum
velit, euismod lacinia quam nisl id lorem. Quisque erat.</p>

<h2>A Heading Level 2</h2>
<p>This paragraph is followed by a sample unordered list:</p>

<ul>
  <li><a href="https://www.google.com" target="_blank">Consectetuer adipiscing elit</a></li>
  <li><a href="https://www.google.com" target="_blank">Metus aliquam pellentesque</a></li>
  <li><a href="https://www.google.com" target="_blank">Urnanet non molestie semper</a></li>
  <li><a href="https://www.google.com" target="_blank">Proin gravida orci porttitor</a></li>
</ul>

<h3>Heading Level 3</h3>
<p>While this is followed by a blockquote:</p>
<blockquote cite="http://www.google.com">
  Donec leo, vivamus nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis,
  rutrum id, congue, and nibh.
</blockquote>
<p> <a href="https://www.google.com" target="_blank">Comments(33)</a> <a href="https://www.google.com">Permalink</a> </p>

<hr>
<p>TAGS: <a href="https://www.google.com">DOLOR IPSUM SIT AMET DOLOR IPSUM LOREM SIT AMET</a> </p>

</article>

<section class="middle">
  <h2>Recent Posts</h2>
  <h3>Aliquam Libero</h3>
  <p>Nullam ante orci, eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna,
  consequat vel, sescipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.<a href="https://www.google.com" target="_blank">More...</a></p>
  <h3>Semper Vestibulum</h3>
  <p>DOnec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id,
  congue, and nibh <a href="https://www.google.com" target="_blank">More...</a>  </p>
</section>
<aside class="sidebar">
<h2>Categories</h2>
<a href="https://www.google.com" target="_blank">Aliquam libero</a>
<a href="https://www.google.com" target="_blank">Consectetuer elit</a>
<a href="https://www.google.com" target="_blank">Metus pellentesque</a>
<a href="https://www.google.com" target="_blank">Suspendisse mauris</a>
<a href="https://www.google.com" target="_blank">Urnanet molestie semper</a>
<a href="https://www.google.com" target="_blank">Proin orci porttitor</a>

<h2>Archives</h2>
<a href="https://www.google.com" target="_blank">September</a>(23)
<a href="https://www.google.com" target="_blank">August</a>(31)
<a href="https://www.google.com" target="_blank">July</a>(31)
<a href="https://www.google.com" target="_blank">June</a>(30)
<a href="https://www.google.com" target="_blank">(31)</a>

<h2>Calendar</h2>

<p class="october">October 2017</p>
<ul class="weekdays">
  <li>M</li>
  <li>T</li>
  <li>W</li>
  <li>T</li>
  <li>F</li>
  <li>S</li>
  <li>S</li>
</ul>

<ul class="days">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li><span class="active">10</span></li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
  <li>21</li>
  <li>22</li>
  <li>23</li>
  <li>24</li>
  <li>25</li>
  <li>26</li>
  <li>27</li>
  <li>28</li>
  <li>29</li>
  <li>30</li>
  <li>31</li>
</ul>
</aside>
</div>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

我想知道我可以对我的代码进行哪些更改，以便将搜索栏放在导航栏旁边，同时摆脱导航栏的多余空间。

2 个答案:

答案 0 :(得分：1)

html {
background-color: lightgrey;
font-size: 100%;
}

body{
  margin: 5%;
  margin-top: 0;
  font-family: Georgia, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif;

}

/* Navigation Bar*/
nav ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #e9eed0
}

#current a{
    background-color: #b8d03b;
    color: white;
}

.nav li {
  float: left;
  border-right: 1px solid #bbb
}

.nav li a {
  display: block;
  color: #8c8f7d;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


/* Search Bar */

.search {
  float: right;
}
 /* Heading */
.heading{
  background-color: #f6f6f6;
  border: 1px solid #b8d03b;
  border-bottom:.5px solid #b8d03b;
}

/* Main text area */

.main {
  display: block;
  background-color: #ffffff;
  color: grey;
  border: 1px solid #b8d03b;
  float: left;
}



.content{
  width: 50%;
  float: left;
  padding: 5px 15px;
}

.middle{
  width:30%;
  float: left;
  padding: 5px 15px;
  margin: 0px 5px 5px 5px;
}

.sidebar{
  width: 10%;
  padding: 5px 15px;
  float: left;
}


/* Calendar */
.october{
  text-align: center;
}
.weekdays {
    margin: 0;
    padding: 10px 0;
    background-color: #cccccc;
    text-align: center;
}

.weekdays li {
    display: inline-block;
    color: #ffffff;
    width: 10%;
    text-align: center;
}

.days {
    text-align: center;
    padding: 10px 0;
    background: #eee;
    margin: 0;
}

.days li {
    list-style-type: none;
    display: inline-block;
    width: 10%;
    text-align: center;
    margin-bottom: 5px;
    font-size:12px;
    color: #777;
}

.days li .active {
    color: #3c8cd7 !important
}

/** Added ***/
      nav{
        width: 100%;
      }
      .navbar{
        float: left
      }
      .search{
        float: right;
      }
      .clearfix{
        clear: both;
      }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title> Final Project </title>
  <link rel="stylesheet" href="style.css">
  <style>
  nav{
    width: 100%;
  }
  .navbar{
    float: left
  }
  .search{
    float: right;
  }
  .clearfix{
    clear: both;
  }
  </style>
</head>

<body>
  <header role='banner'>
    <nav>
      <div class="navbar">
        <ul class="nav">
          <li id="current"><a href="index.html">Home </a></li>
          <li><a href="ela.html">ELA</a> </li>
          <li><a href="photos.html"> Photos</a></li>
          <li> <a href="about.html">About</a></li>
          <li> <a href="contacts.html">Contact</a></li>
        </ul>
      </div>
      <div class="search">
        <form method="get" action="search-results.php" role="search">
          <label for="search"> Search: </label>
          <input type="search" size="30">
          <input type="submit" value="Search" />
        </form>
      </div>
      <div class="clearfix"></div>
    </nav>
  </header>

  <div class="heading">
    <p><span> News Flash</span> By Guillermo Molina </p>
    <p><small>>> Home</small></p>
  </div>
  <div class="main">


    <article class="content">
      <p><small>posted on Novermber 16, 2017 by Guillermo Molina</small></p>
      <h1>About This Template</h1>
      <p><strong>News Flash</strong> Denec leo. Vivamus fermnetum nibh in augue.
        Praesent a lacus at erna congue rutrum. Nulla enim erosm porttitor eu, tempus
        id, varius non, nib. Duis enim nula luctus eu, dapibus lacinia, venenatis id  quam.
        Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum velit, euismod lacinia quam nisl id lorem. Quisque erat.
      </p>

      <p>Vestibulum imperdiet, magna nec eleifend rutrum, nunc lectus vestibulum
      velit, euismod lacinia quam nisl id lorem. Quisque erat.</p>

      <h2>A Heading Level 2</h2>
      <p>This paragraph is followed by a sample unordered list:</p>

      <ul>
        <li><a href="https://www.google.com" target="_blank">Consectetuer adipiscing elit</a></li>
        <li><a href="https://www.google.com" target="_blank">Metus aliquam pellentesque</a></li>
        <li><a href="https://www.google.com" target="_blank">Urnanet non molestie semper</a></li>
        <li><a href="https://www.google.com" target="_blank">Proin gravida orci porttitor</a></li>
      </ul>

      <h3>Heading Level 3</h3>
      <p>While this is followed by a blockquote:</p>
      <blockquote cite="http://www.google.com">
        Donec leo, vivamus nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis,
        rutrum id, congue, and nibh.
      </blockquote>
      <p> <a href="https://www.google.com" target="_blank">Comments(33)</a> <a href="https://www.google.com">Permalink</a> </p>

      <hr>
      <p>TAGS: <a href="https://www.google.com">DOLOR IPSUM SIT AMET DOLOR IPSUM LOREM SIT AMET</a> </p>

    </article>

    <section class="middle">
      <h2>Recent Posts</h2>
      <h3>Aliquam Libero</h3>
      <p>Nullam ante orci, eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus. Curabitur sem urna,
        consequat vel, sescipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdiet.<a href="https://www.google.com" target="_blank">More...</a></p>
        <h3>Semper Vestibulum</h3>
        <p>DOnec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id,
          congue, and nibh <a href="https://www.google.com" target="_blank">More...</a>  </p>
        </section>
        <aside class="sidebar">
          <h2>Categories</h2>
          <a href="https://www.google.com" target="_blank">Aliquam libero</a>
          <a href="https://www.google.com" target="_blank">Consectetuer elit</a>
          <a href="https://www.google.com" target="_blank">Metus pellentesque</a>
          <a href="https://www.google.com" target="_blank">Suspendisse mauris</a>
          <a href="https://www.google.com" target="_blank">Urnanet molestie semper</a>
          <a href="https://www.google.com" target="_blank">Proin orci porttitor</a>

          <h2>Archives</h2>
          <a href="https://www.google.com" target="_blank">September</a>(23)
          <a href="https://www.google.com" target="_blank">August</a>(31)
          <a href="https://www.google.com" target="_blank">July</a>(31)
          <a href="https://www.google.com" target="_blank">June</a>(30)
          <a href="https://www.google.com" target="_blank">(31)</a>

          <h2>Calendar</h2>

          <p class="october">October 2017</p>
          <ul class="weekdays">
            <li>M</li>
            <li>T</li>
            <li>W</li>
            <li>T</li>
            <li>F</li>
            <li>S</li>
            <li>S</li>
          </ul>

          <ul class="days">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li><span class="active">10</span></li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
            <li>29</li>
            <li>30</li>
            <li>31</li>
          </ul>
        </aside>
      </div>
    </body>

    </html>

你必须再增加一些课程，

额外的css 

  nav{
    width: 100%;
  }
  .navbar{
    float: left
  }
  .search{
    float: right;
  }
  .clearfix{
    clear: both;
  }

并且导航html很少修改

<nav>
  <div class="navbar">
    <ul class="nav">
      <li id="current"><a href="index.html">Home </a></li>
      <li><a href="ela.html">ELA</a> </li>
      <li><a href="photos.html"> Photos</a></li>
      <li> <a href="about.html">About</a></li>
      <li> <a href="contacts.html">Contact</a></li>
    </ul>
  </div>
  <div class="search">
    <form method="get" action="search-results.php" role="search">
      <label for="search"> Search: </label>
      <input type="search" size="30">
      <input type="submit" value="Search" />
    </form>
  </div>
  <div class="clearfix"></div>
</nav>

只需使用float:right和float:left，然后使用clear:both。 检查一下..

答案 1 :(得分：0)

在CSS规则中添加：

header {
    display: inline-block;
}

div.search {
    line-height: 45px;
}

你只需要第一个，第二个是纯装饰

相关问题
最新问题