[英]Cant make my navigation bar fit all pages
在我的导航栏中，我有5页，首页，关于我们，最近通过，地区，联系方式
接触似乎在下面。
我曾尝试使字体变小，但我仍然没有任何幸运能有人请我帮忙。
这是网站预览的链接-http: //leetaxi.webuda.com/index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<title>Graduate School Of Motoring</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/scripts.css">
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/grid.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css">
<!-- Change Color Stylesheet Here -->
<link rel="stylesheet" href="css/colors/default.css">
<!-- TEMPLATE STYLESHEETS -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/layout.css">
<!-- REVOLUTION BANNER CSS SETTINGS -->
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt ie 7]>
<p class="browsehappy">you are using an <strong>outdated</strong> browser. please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="preloader"><i class="fa fa-spinner spin"></i></div>
<!-- SLIDER -->
<div class="slider-wrapper">
<div class="rev-slider">
<ul>
<!-- SLIDE #1 -->
<li data-transition="fade" data-masterspeed="1000" data-delay="6000" >
<!-- BACKGROUND -->
<img src="img/slider/bg-1.jpg" alt="">
<!-- BIG TEXT -->
<h1 class="tp-caption caption-title2 sft"
data-x="center"
data-y="center"
data-speed="1000">
<img src="img/slider/main.png" width="390" height="108">
</h1>
<!-- LIST -->
<div class="tp-caption slider-list sfb"
data-y="center"
data-x="center"
data-voffset="50"
data-speed="500"
data-splitin="chars"
data-splitout="chars"
data-start="1500"
data-elementdelay="0.04">
</div><!-- End .tp-caption -->
</li>
<li data-transition="fade" data-masterspeed="1000" data-delay="6000" >
<!-- BACKGROUND -->
<img src="img/slider/bg-2.jpg" alt="">
<!-- BIG TEXT -->
<h1 class="tp-caption caption-title2 sft"
data-x="center"
data-y="center"
data-speed="1000">
<img src="img/slider/main.png" width="390" height="108">
</h1>
<!-- LIST -->
<div class="tp-caption slider-list sfb"
data-y="center"
data-x="center"
data-voffset="50"
data-speed="500"
data-splitin="chars"
data-splitout="chars"
data-start="1500"
data-elementdelay="0.04">
</div><!-- End .tp-caption -->
</li>
<!-- SLIDE #2 -->
<li data-transition="fade" data-masterspeed="1000" data-delay="6000" >
<!-- BACKGROUND -->
<img src="img/slider/bg-3.jpg" alt="">
<!-- BIG TEXT -->
<h1 class="tp-caption caption-title2 sft"
data-x="center"
data-y="center"
data-speed="1000">
<img src="img/slider/main.png" width="390" height="108">
</h1>
<!-- LIST -->
<div class="tp-caption slider-list sfb"
data-y="center"
data-x="center"
data-voffset="50"
data-speed="500"
data-splitin="chars"
data-splitout="chars"
data-start="1500"
data-elementdelay="0.04">
</div><!-- End .tp-caption -->
</li>
<!-- SLIDE #3 -->
<li data-transition="fade" data-masterspeed="1000" data-delay="6000" >
<!-- BACKGROUND -->
<img src="img/slider/bg-4.jpg" alt="">
<!-- BIG TEXT -->
<h1 class="tp-caption caption-title2 sft"
data-x="center"
data-y="center"
data-speed="1000">
<img src="img/slider/main.png" width="390" height="108">
</h1>
<!-- LIST -->
<div class="tp-caption slider-list sfb"
data-y="center"
data-x="center"
data-voffset="50"
data-speed="500"
data-splitin="chars"
data-splitout="chars"
data-start="1500"
data-elementdelay="0.04">
</div><!-- End .tp-caption -->
</li>
</ul>
</div><!-- End .rev-slider -->
</div><!-- End .slider-wrapper -->
<div class="header">
<div class="container">
<!-- LOGO -->
<a href="index.html" class="logo">
<img src="img/logo.png" width="70" alt="Horizon">
</a>
<ul id="sn" class="main_menu">
<li><a class="current" href="index.html">Home</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#portfolio">Recently Passed</a></li>
<li><a href="index.html#services">Areas</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul><!-- End .main-menu -->
</div><!-- End .container -->
</div><!-- End .header -->
<!-- ABOUT -->
<section id="about" class="sect-1">
<div class="container">
<div class="section-title">
<h1 class="title">About Us</h1>
<p class="description">These are some of the services we offer
</li></div></p>
<div align="center"><ul class="features">
<p>At Graduate School of Motoring, we have been providing quality driving instruction to all abilities for over 20 years.</p>
<p>We have both male and female instructors to make you feel comfortable and at ease at all times during your learning experience. Our lessons are always challenging, fun and kept at a pace to suit you. At Graduate School of Motoring, we understand how important it is to have a driving instructor that matches your personality.</p>
<p>This is why we have male and female instructors available, and all our instructors are friendly and patient. We know how unnerving driving a car can be, so we always work with you, instantly recognising your strengths and working on the weaknesses.</p>
<p>We also have refresher lessons available for all ages.</p>
<p>Why choose Graduate School of Motoring?<br>
Incredibly quick pass rate<br>
Male and female instructors available<br>
Long serving company with bags of experience<br>
Great block deals<br>
Refresher lessons available<br>
Friendly and patient instructors<br>
1st lesson is free of charge<br>
All ages welcome<br>
Pass plus available</p>
</ul>
</div>
</div><!-- End .container -->
</section>
<!-- PORTFOLIO -->
<section id="portfolio" class="portfolio-wrapper sect-2">
<div class="container">
<div class="section-title">
<h1 class="title">Recent Passes</h1>
<p class="description">These are some of our pupils that have recently passed.</p>
</div>
<!-- CATEGORIES -->
<ul class="filter-menu">
<li class="selected" data-cat="*">All</li>
</ul><!-- End .filter-menu -->
</div><!-- End .container -->
<!-- HOOK FOR PROJECT VIEWER -->
<div class="project-wrapper"></div>
<div class="container">
<div class="portfolio clearfix">
<!-- ITEM 1 -->
<div class="port-item showme" data-cat="branding">
<div class="port-overlay">
<img src="img/portfolio/port-1.jpg" alt="Portfolio Image">
<a class="project-btn" href="single-project.html"><i class="fa fa-search"></i></a>
</div>
<div class="port-info">
<i class="fa fa-camera"></i>
<span class="port-cat">James Youells</span>
<span class="port-name">Passed</span>
</div>
</div><!-- End port item -->
<!-- ITEM 2 -->
<div class="port-item showme" data-cat="photography">
<div class="port-overlay">
<img src="img/portfolio/port-2.jpg" alt="Portfolio Image">
<a class="project-btn" href="single-project-full.html"><i class="fa fa-search"></i> </a>
</div>
<div class="port-info">
<i class="fa fa-camera"></i>
<span class="port-cat">Lisa Jones</span>
<span class="port-name">Passed</span>
</div>
</div><!-- End port item -->
<!-- ITEM 3 -->
<div class="port-item showme" data-cat="branding">
<div class="port-overlay">
<img src="img/portfolio/port-3.jpg" alt="Portfolio Image">
<a class="lightbox-btn" data-pp="prettyPhoto" href="img/portfolio/port-3.jpg"><i class="fa fa-search"></i></a>
</div>
<div class="port-info">
<i class="fa fa-camera"></i>
<span class="port-cat">Sam Smith</span>
<span class="port-name">Passed</span>
</div>
</div><!-- End port item -->
<!-- ITEM 4-->
<div class="port-item showme" data-cat="art">
<div class="port-overlay">
<img src="img/portfolio/port-4.jpg" alt="Portfolio Image">
<a class="project-btn" href="single-project.html"><i class="fa fa-search"></i></a>
</div>
<div class="port-info">
<i class="fa fa-camera"></i>
<span class="port-cat">Samantha Tom</span>
<span class="port-name">Passed</span>
</div>
</div><!-- End port item -->
<!-- ROW 2 -->
<!-- ITEM 5 --><!-- End port item -->
<!-- ITEM 6 --><!-- End port item -->
<!-- ITEM 7 --><!-- End port item -->
<!-- ITEM 8--><!-- End port item -->
<!-- ROW 3 -->
<!-- ITEM 9 --><!-- End port item -->
<!-- ITEM 10 --><!-- End port item -->
<!-- ITEM 11 --><!-- End port item -->
<!-- ITEM 12 --><!-- End port item -->
</div><!-- End .portfolio -->
</div><!-- End .container -->
<a href="index.html#" id="load-more" class="button outline">Load more</a>
</section>
<!-- CALLOUT -->
<section id="services" class="sect-1">
<div class="container">
<div class="callout">
<h3 class="title">We can help you if you are in: </h3>
<p> </p>
<h3 class="title"><a href="index.html#contact" class="button outline">Call Us</a> </h3>
</div><!-- End .callout -->
<ul class="feature-imgs">
<li class="one-third animated" data-animate="flipInY">
<div class="feature-hex">
<img src="img/features/features-1.jpg" alt="feature image 1" />
</div>
<h4 class="title">Gravesend<br>Dartford<br>Swanscombe<br>Darenth</h4>
<p> </p>
</li>
<li class="one-third animated middle" data-animate="flipInY" data-animate-delay="1500">
<div class="feature-hex">
<img src="img/features/features-2.jpg" alt="feature image 2" />
</div>
<h4 class="title">Medway Towns<br>New Ash Green<br>Borough Green<br>Wrotham</h4>
</li>
<li class="one-third animated last" data-animate="flipInY" data-animate-delay="2000">
<div class="feature-hex">
<img src="img/features/features-3.jpg" alt="feature image 2" />
</div>
<h4 class="title">Sevenoak<br>Sidcup<br>Erith<br>Belverdere</h4>
</li>
</ul>
</div><!-- End .container -->
</section>
<!-- TESTIMONIALS --><!-- CLIENTS -->
<div class="clients"><!-- End .container -->
</div><!-- End .clients -->
<!-- TEAM -->
<section class="sect-2">
<div class="container">
<div class="section-title">
<h3 class="title">OUR DRIVERS</h3>
</div>
<ul class="team">
<li class="one-fourth animated" data-animate="flipInY">
<div class="img-wrap">
<img src="img/team/team-1.jpg" alt="Team Member">
<i class="fa fa-camera"></i>
</div>
<span class="team-name">John Green</span>
<span class="team-job"></span>
<ul class="social-icons">
</ul><!-- End .social-icons -->
</li><!-- End .one-fourth -->
<li class="one-fourth animated" data-animate="flipInY" data-animate-delay="1000">
<div class="img-wrap">
<img src="img/team/team-2.jpg" alt="Team Member">
<i class="fa fa-tint"></i>
</div>
<span class="team-name">Peter Brown</span>
<span class="team-job"></span>
<ul class="social-icons">
</ul><!-- End .social-icons -->
</li><!-- End .one-fourth -->
<li class="one-fourth animated" data-animate="flipInY" data-animate-delay="1500">
<div class="img-wrap">
<img src="img/team/team-3.jpg" alt="Team Member">
<i class="fa fa-coffee"></i>
</div>
<span class="team-name">Jane Red</span>
<span class="team-job">r</span>
<ul class="social-icons">
</ul><!-- End .social-icons -->
</li><!-- End .one-fourth -->
<li class="one-fourth last animated" data-animate="flipInY" data-animate-delay="2000">
<div class="img-wrap">
<img src="img/team/team-4.jpg" alt="Team Member">
<i class="fa fa-rocket"></i>
</div>
<span class="team-name">Richard Blue</span>
<span class="team-job"></span>
<ul class="social-icons">
</ul><!-- End .social-icons -->
</li><!-- End .one-fourth -->
</ul><!-- End .team -->
</div><!-- End .container -->
</section>
<!-- OUR SKILLS -->
<section id="skills" class="sect-1"></section>
<!-- CAllOUT --><!-- End .image-callout -->
<!-- PRICING --><!-- RECENT POSTS --><!-- CONTACT -->
<div class="section-title">
<h3 class="title">Contact Us</h3>
<p class="description">Please use the contact form below to email us.</p>
</div>
<form method="post" action="php/send_message.php" class="contact-form">
<div class="one-half animated" data-animate="fadeInDown">
<span>
<input type="text" name="name" id="name" placeholder="name">
</span>
<span>
<input type="email" name="email" id="email" placeholder="email">
</span>
<span>
<input type="text" name="subject" id="subject" placeholder="subject">
</span>
</div><!-- End .one-third -->
<div class="one-half last animated" data-animate="fadeInDown" data-animate-delay="1000">
<span>
<textarea name="message" id="message" placeholder="message"></textarea>
</span>
</div><!-- End .one-half -->
<button id="submit" type="submit" class="contact-button animated" data-animate="fadeInDown" data-animate-delay="1000">Send Message</button>
</form>
</div><!-- End .container -->
</section>
<!-- MAP -->
<div class="map-button">
<i class="fa fa-map-marker"></i> LOCATE US ON THE MAP
</div>
<div class="map-wrapper">
<div id="google-map"></div>
</div><!-- End .map-wrapper -->
<!-- MAP LOCATION WINDOW -->
<div id="content">
<div id="siteNotice">
</div>
<h2 id="firstHeading" class="firstHeading">Graduate School Of Motoring</h2>
<div id="bodyContent">
<p>This is us, drop by sometime.</p>
</div>
</div><!-- End #content -->
<section class="footer">
<img class="footer-logo" src="img/logo.png" width="50" alt="">
<div class="address">
Tel: 01474 332225</div><!-- End .address -->
<ul class="social-icons">
</ul>
<div class="copy">© 2014 Gradute School Of Motoring</div>
</section>
<!-- JQUERY -->
<script src="js/vendor/jquery.min.js"></script>
<!-- PLUGINS -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="js/scripts.js"></script>
<script src="js/plugins.js"></script>
<!-- THEME SCRIPT -->
<script src="js/main.js"></script>
非常感谢
在您的情况下，只需将<ul>的宽度设置为足以将所有制表符放在一行中即可 。
只需添加width: 90%; 和text-align: center; 到您的.main_menu CSS类。
您可以删除display: inline-block; float: right; 来自.main_menu类，并向列表.main_menu添加margin-left ，最后加上徽标的宽度，以及text-align: right; 如果要菜单位置向右对齐。
所以这：
.main_menu {
display: inline-block;
float: right;
font-size: 12px;
margin-top: 0;
position: relative;
}
现在看起来像这样：
.main_menu {
font-size: 12px;
margin-top: 0;
position: relative;
background: red;
margin-left: 150px; /* logo width + some padding from it */
text-align: right;
}
无法更改我的JavaScript以使其适合！ -CSS和JavaScript
[英]cant change my javascript to make it fit! - css and javascript
如何在一个地方编写导航栏并仅使用html / css / js在所有页面上使用它
[英]How to write a navigation bar in one place and use it across all pages with just html/css/js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.