html - 如何将导航栏和 slider 对齐

Question

好的，我正在重新构建 ndex 页面时遇到问题(由于闪存驱动器损坏。:(，我希望导航栏与其下方的 slider 齐平...在导航栏的那一刻bat 太左了，看起来不太好:/例如--->

我会给你我的 html 和我的 css 来引用:

导航和 slider 的 HTML

<div class="nav">
      <ul>
        <li class="home"><a href="">Home</a></li>


        <li class=""><a href="#">sports news</a>
          <ul>
            <li><a href="#">headlines</a></li>

             <li><a href="#">when an where</a></li>
             <li><a href="">rewind</a></li>
             <li><a href="">manager of the week </a></li>
          </ul>
           <li class=""><a href="#">music</a>
           <ul>
                     <li><a href="#">whats new</a></li>
                     <li><a href="#">the classic corner</a></li>
                     <li><a href="#">hall of fame</a></li>
                     </ul>




        </li>
        <li class="news"><a href="#">on air</a>
          <ul>
            <li><a href="#">schedule</a></li>
            <li><a href="#">presenters</a></li>
            <li><a href="#">competitions</a></li>
            <li><a href="#">guests</a></li>
          </ul>
        </li>

        <li class="contact"><a href="#">events</a></li>
        <li class="contact"><a href="#">gallery</a></li>
        <li class="contact"><a href="#">Contact</a></li>
      </ul>
    </div>
    <div class="cleaner"></div>


<div id="middle">
<div id="slider">
        <a href="#"><img src="images/slideshow/01.jpg" alt="slideshow 01" title="wow" /></a>
        <a href="#"><img src="images/slideshow/02.jpg" alt="slideshow 02" title="wow" /></a>
        <a href="#"><img src="images/slideshow/03.jpg" alt="slideshow 03" title="wow" /></a>
        <a href="#"><img src="images/slideshow/04.jpg" alt="slideshow 04" title="wow" /></a>
        <a href="#"><img src="images/slideshow/05.jpg" alt="slideshow 05" title="wow" /></a>
    </div>


</div>

CSS:

body {
    margin: 0px;
    padding: 0px;
    color: #4d4638;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 13px;
    line-height: 1.7em; 
    background: url(images/tooplate_body.jpg);
    background-color: #c2b8a1;
    background-repeat: repeat-x;
    background-position: top    
}

a, a:link, a:visited { color: #000; font-weight: bold; text-decoration: none; }
a:hover { text-decoration: underline; }

.orange {
    color: #FC0;
}

.green {
    color: #CF6;
}

p { margin: 0 0 10px 0; padding: 0; }
img { border: none; }
em { color: #000; font-weight: bold; font-style: normal }

h1, h2, h3, h4, h5, h6 { color: #000; font-weight: normal; }
h1 { font-size: 34px; margin: 0 0 20px 0; padding: 5px 0 }
h2 { font-size: 28px; margin: 0 0 20px 0; padding: 5px 0; }
h3 { font-size: 24px; margin: 0 0 15px; padding: 0; }
h4 { font-size: 18px; margin: 0 0 15px; padding: 0; }
h5 { font-size: 16px; margin: 0 0 10px; padding: 0;  }
h6 { font-size: 14px; margin: 0 0 5px; padding: 0; }

.cleaner { clear: both }
.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.h60 { height: 60px }

a.more { 
    clear: both; 
    display: block; 
    width: 87px; 
    height: 31px; 
    padding-right: 15px; 
    line-height: 30px; 
    text-align: center; 
    color: #000; 
    font-weight: bold; 
    background: url(images/btn.png); 
}

a.more:hover { 
    text-decoration: none; 
    color: #960; 
}

.float_l { float: left }
.float_r { float: right }

.margin { margin: 10px; }

.image_wrapper { 
    display: inline-block; 
    border: 1px solid #cac2b1; 
    background: #b5ac98; 
    padding: 4px; 
    margin-bottom: 5px; 
}

.image_fl { 
    float: left; 
    margin: 3px 15px 0 0; 
}

.image_fr { 
    float: right; 
    margin: 3px 0 0 15px; 
}

.list { 
    margin: 20px 0 20px 20px; 
    padding: 0; 
    list-style: none; 
}

.list li { 
    color:#000; 
    margin: 0 0 5px 0; 
    padding: 0 0 0 25px; 
    background: url(images/list.png) no-repeat scroll 0 5px;  
}

.list li a { 
    color: #000; 
    font-weight: normal; 
}

.list li a:hover { 
    text-decoration: underline; 
}

#header {
    width: 960px;
    padding: 10px 0;
    margin: 0 auto;
}

#site_title { 
    float: left; 
}

#site_title h1 { 
    margin: 30px 0 0 0; 
    padding: 0; 
}

#site_title h1 a { 
    display: block; 
    width: 278px; 
    height: 50px; 
    color: #fff; 
    text-indent: -10000px; 
    background: url(images/logo.png) no-repeat; 
}

/* menu */
#menu {
    float: right;
    width: 632px;
    height: 48px;
    margin-top: 40px;
    background: url(images/menu.png)
}

#menu ul {
    width: 600px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

#menu ul li {
    float: left;
    display: block;
    padding: 0;
    margin: 0;
    display: inline;
    text-align: center;
}

#menu ul li a {
    display: block;
    width: 116px;
    padding: 9px 4px 9px 0;
    margin: 0;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    color: #000000; 
    text-shadow: 1px 1px 1px #cec8ba;
    font-weight: normal;
    outline: none;
    border: none;
    background: url(images/menu_divider.png) center right no-repeat
}

#menu ul li a:hover, #menu ul li .current { 
    color: #fff; 
    text-shadow: 1px 1px 1px #3d3728;  
}

#menu ul .last { 
    background: none; 
}

#search_box { 
    float: right; 
    margin: 12px 0 0 0; 
    width: 170px; 
    height: 27px; 
    background: url(images/search.png) no-repeat; 
}

#search_box form { 
    clear: both; 
    width: 170px; 
    height: 26px; 
    padding: 0; 
    margin: 0; 
} 

#searchfield { 
    float: left; 
    display: block; 
    height: 16px; 
    width: 130px; 
    padding: 5px; 
    font-size: 12px; 
    color: #ccc; 
    line-height: 0; 
    background: none; 
    border: none; 
} 

#searchbutton { 
    float: right; 
    display: block; 
    height: 26px; 
    width: 30px; 
    padding: 0; 
    margin: 0; 
    cursor: pointer;
    background: none; 
    border: none; 
}

/* end of menu */

/* slider */

#middle { 
    clear: both;
    width: 940px;
    height: 307px;
    padding: 10px 40px;
    margin: 0 auto;
    background: url(images/middle_home.png) no-repeat
}

#middle_subpage { 
    clear: both;
    width: 820px;
    height: 207px;
    padding: 60px 100px;
    margin: 0 auto;
    font-family: Georgia, "Times New Roman", Times, serif;
    background: url(images/middle_subpage.png) no-repeat;
}

#middle_subpage h2 { 
    font-size: 48px; 
    color: #000; 
}

#middle_subpage p { 
    font-size: 18px; 
    color: #000; 
    line-height: 30px; 
}

#middle_subpage a { 
    color: #507921; 
    font-weight: normal; 
}

#slider {
    float: right;
    width: 940px;
    height: 300px; 
    overflow: hidden;
}

/* end of slider */

#main {
    clear: both;
    width: 960px;
    padding: 30px 0;
    margin: 0 auto;
}

.col_w960 { width: 960px; margin-bottom: 40px }
.col_w600 { width: 600px }
.col_w450 { width: 450px }
.col_w300 { width: 300px }
.col_allw300 { width: 300px; float: left; margin-right: 30px }
.col_last { margin: 0 }
.col_w960_last { margin: 0; background: none; }
.col_last { margin: 0; }

.wwd_box { clear: both; margin-top: 20px; margin-bottom: 40px }
.wwd_box img { float: left; width: 80px; margin-right: 30px }
.wwd_box h3 { font-size: 16px; margin-bottom: 0 }
.wwd_box h3 a { color: #507921; font-size: 16px; font-weight: normal }
.wwd_box p { margin-bottom: 30px; }

.lp_box { float: left; width: 300px; margin-right: 30px }
.lp_box h6 { font-weight: bold; color: #507921 }
.lp_box_last { margin: 0 }
.lp_box img { border: 1px solid #CCC; padding: 4px }

#cp_contact_form { 
    margin: 10px;
    padding: 0; 
    width: 412px; 
}

#cp_contact_form form { 
    margin: 0px; 
    padding: 0px; 
}

#cp_contact_form form .input_field { 
    width: 400px; 
    padding: 10px;
    border: 1px solid #ccc;  
    background: #fff;
    color: #333;  
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
    margin-top: 5px;
}

#cp_contact_form form label { 
    display: block; 
    width: 100px; 
    margin-right: 10px; 
    font-size: 14px; 
}

#cp_contact_form form textarea { 
    width: 400px; 
    height: 160px; 
    padding: 10px; 
    border: 1px solid #ccc;  
    background: #fff;
    color: #333;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
    margin-top: 5px;
}

#cp_contact_form form .submit_btn { 
    margin: 5px 0px;
    padding: 5px 14px; 
    text-decoration: none; 
    border: 1px solid #ccc;  
    background: #fff;
    font-size: 14px;  
}

#map {
    margin: 10px;
}

#map img { 
    width: 300px; 
    height: 200px; 
    border: 1px solid #d9d3c5; 
    background: #b5ac98; 
    padding: 7px; 
    margin-bottom: 10px; 
}

.news_box { 
    clear: both; 
    margin-bottom: 30px; 
    padding-bottom: 30px; 
    border-bottom: 1px dashed #333; 
}

.news_box h2 { 
    font-size: 20px; 
    margin-bottom: 0; 
}

.news_box p.date { 
    color: #000; 
}

.news_box img { 
    float: left; 
    padding: 4px; 
    border: 1px solid #000; 
    margin-right: 30px; 
}

.news_box a.more { 
    clear:none; 
    float: right; 
}

.sb_lp_box { 
    clear: both; 
    margin-bottom: 20px; 
}

.sb_lp_box img { 
    border: 1px solid #cac2b1; 
    background: #b5ac98; 
    padding: 8px; 
    margin-bottom: 10px; 
}

.post_box { 
    clear: both; 
    margin-bottom: 30px; 
}

.post_box h2 { 
    font-size: 20px; 
    margin-bottom: 10px; 
}

.post_box p.post_meta { 
    margin-bottom: 0; 
}

.post_box p span.cat a { 
    color: #507921; 
    font-weight: 400; 
}

.post_box img { 
    width: 550px; 
    height: 160px; 
    border: 1px solid #cac2b1; 
    background: #b5ac98; 
    padding: 8px; 
    margin-bottom: 10px; 
}

.post_box a.more { 
    float: left; 
}

.lbe_box { 
    clear: both; 
    margin-bottom: 20px; 
}

.lbe_box h3 { 
    font-size: 16px; 
    margin-bottom: 0; 
}

.lbe_box h3 a { 
    color: #507921; 
    font-size: 16px; 
    font-weight: normal; 
}

.lbe_box h3 a span { 
    font-size: 12px; 
    color: #507921; 
}

.lbe_box p { 
    margin-bottom: 0; 
}

.lbe_box p.date { 
    font-size: 10px; 
    font-weight: 700; 
    color: #507921; 
}

#gallery { 
    margin: 0; 
    padding: 0; 
}

#gallery ul { 
    margin: 0; 
    padding: 0;
}

#gallery ul li { 
    display: block; 
    float: left; 
    width: 281px; 
    margin: 0 30px 30px 0; 
    padding: 8px; 
    border: 1px solid #d0c9b8; 
    background: #b6ac97; 
}

#gallery ul .third { 
    margin: 0 0 30px 0; 
}

#gallery ul li a img { 
    border: 1px solid #ccc; 
    margin-bottom: 5px; 
}

#footer_wrapper {
    clear: both;
    width: 100%;
    background: #a19882;
    border-top: 10px solid #d0c8b4;
}

#footer {
    width: 960px;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
    color: #000;
    background:  url(images/footer.jpg) top center no-repeat
}

    color: #5fa008; 
    font-weight: normal;


}

.nav ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  font-family: 'Oswald', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
}

.nav a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}

.nav a:hover {
  background-color: #005f5f;
}

.nav a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}

/* Sub Menus */
.nav li li {
  font-size: .8em;
}



@media screen and (min-width: 650px) {
  .nav li {
    width: 130px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
  }

  .nav a {
    border-bottom: none;
  }

  .nav > ul > li {
    text-align: center;
  }

  .nav > ul > li > a {
    padding-left: 0;
  }

  /* Sub Menus */
  .nav li ul {
    position: absolute;
    display: none;
    width: inherit;
  }

  .nav li:hover ul {
    display: block;
  }

  .nav li ul li {
    display: block;
  }
    }


    .nav ul{
    position:relative;
    z-index:9999;
}

}

Answer 1

将此添加到您的 CSS:

.nav {
    margin-right: auto;
    margin-left: auto;
    clear: both;    
}

我做了一个 fiddle 来测试: http://jsfiddle.net/8x1fkpoe/