导航栏问题

我正在使用导航栏来处理正在处理的项目。我一直在水平导航栏上遇到麻烦，而且我到处寻找正确的解决方案，但没有成功。导航栏向左移动，所以我在我的css中放入了一些填充，现在它已居中，但文本不居中，第一个链接的悬停效果不能覆盖整个“框”文字是在导航栏问题

CSS：

/* Entire Document CSS */ 
html{ 
    height: 100%; 
} 
/* Header CSS */ 
.headers{ 
    color: #FFFFFF; 
    text-align: center; 
    padding: 30px; 
    margin-bottom: 0px; 
    margin-top: 0px; 
    background-color: #63B8FF; 
} 
.headers2{ 
    color: #FFD89A; 
    text-align: center; 
    padding: 10px; 
} 
/* Body CSS */ 
.body{ 
    background-color: #61B329; 
    height: 50%; 
    color: #FFFFFF; 
} 
.container{ 
    margin-left: auto; 
    margin-right: auto; 
    width: 50em; 
    text-align: center; 
    padding-bottom: 500px; 
    height: 50%; 
} 
/* Navigation CSS */ 
.nav{ 
    display: inline-block; 
    background-color: #00B2EE; 
    border: 1px solid #000000; 
    border-width: 1px 0px; 
    margin: 0px 0px 0px 0px; 
} 
.nav li{ 
    display: inline-block; 
} 
.nav a{ 
    display: inline-block; 
    padding: 10px 110px 10px 0.80px; 
    text-align: center; 
} 
/* Footer CSS */ 
#footer { 
clear: both; 
position: relative; 
z-index: 10; 
height: 3em; 
margin-top: -3em; 
} 
#content { 
    padding-bottom: 3em; 
} 
/* Link CSS */ 
a:link{ 
    color: #FFFFFF; 
    text-decoration: none; 
} 
a:visited{ 
    color: #FFFFFF; 
    text-decoration: none; 
} 
a:hover{ 
    background-color: #028482; 
    color: #FFFFFF; 
    text-decoration: overline; 
} 
a:active{ 
    background-color: #FF9C00; 
    color: #FFFFFF; 
    text-decoration: underline; 
} 
.Links A:hover{ 
    color: #028482; 
    background-color: transparent; 
    text-decoration: underline overline; 
}

HTML5（索引页）

<!doctype html> 
<html lang="en"> 

    <head> 
     <meta charset="utf-8" /> 
     <title>Play - Learn - Grow</title> 
     <link rel="stylesheet" href="main.css"> 
    </head> 

    <body class="body"> 

     <h1 class="headers">Welcome to KUBE Toy Library!</h1> 

     <nav> 
      <ul class="nav"> 
       <li><a href="index.html">Home</a></li> 
       <li><a href="about.html">About Us</a></li> 
       <li><a href="contact.html">Contact Us</a></li> 
       <li><a href="membership.html">Become a Member</a></li> 
       <li><a href="borrow.html">Borrow Toys</a></li> 
       <li><a href="policies.html">Our Policies</a></li> 
       <li><a href="sitemap.html">Site Map</a></li> 
      </ul> 
     </nav> 

     <h2 class="headers2">Welcome to the Home Page!</h2> 

     <div class="container"> 

      Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance 
      their cognitive, social, emotional and physical development in the important first six years of their lives. 

      <br><br><span class="Links">Be sure to check out our Wikispace site with more information <a href="http://mysocialmediatools-pn.wikispaces.com/">here</a>!</span> 

     </div> 

     <div id="content"></div> 

     <div id="footer"> 
      Copyright &copy 2013 
     </div> 


     </body> 

</html>

请注意，我是很新相比，这里在这个论坛的人，所以请把它容易在我身上！ :)此外，这是一个虚构的公司，等等我给的任务。谢谢！

来源

2013-10-31 Deadpool

嗨你在我的浏览器页面中显示像下面 enter image description here

我改变你的CSS，使独立IT浏览器的分辨率。作为一名UI开发人员，我觉得overline看起来不太好，所以我删除了它。使用我的代码

/* Body CSS */ 
.body { 
    background-color: #61B329; 
    color: #FFFFFF; 
} 

/* Header CSS */ 
.headers { 
    color: #FFFFFF; 
    text-align: center; 
    padding: 30px; 
    margin: 0; 
    background-color: #63B8FF; 
} 

.headers2 { 
    color: #FFD89A; 
    text-align: center; 
    padding: 10px; 
} 

.container { 
    margin: 0 auto; 
    width: 50em; 
    text-align: center; 
    padding-bottom: 500px; 
} 

/* Navigation CSS */ 
.nav { 
    display: inline-block; 
    background-color: #00B2EE; 
    border: 1px solid #000000; 
    border-width: 1px 0px; 
    margin: 0; 
    padding: 0; 
    min-width: 1000px; 
    width: 100%; 
} 

.nav li { 
    list-style-type: none; 
    width: 14.28%; 
    float: left; 
} 

.nav a { 
    display: inline-block; 
    padding: 10px 0; 
    width: 100%; 
    text-align: center; 
} 

/* Footer CSS */ 
#footer { 
clear: both; 
position: relative; 
z-index: 10; 
height: 3em; 
margin-top: -3em; 
} 

#content { 
    padding-bottom: 3em; 
} 

/* Link CSS */ 
a:link, 
a:visited, 
a:hover { 
    color: #FFFFFF; 
    text-decoration: none; 
} 

a:hover { 
    background-color: #028482; 
} 

a:active { 
    background-color: #FF9C00; 
    color: #FFFFFF; 
    text-decoration: underline; 
} 

.Links A:hover { 
    color: #028482; 
    background-color: transparent; 
    text-decoration: underline overline; 
}

来源

2013-10-31 10:22:58

谢谢！当你回答这个问题时，我做了一些改变，而且效果很好！我把你编辑的代码的一部分，它似乎很好地工作。 – Deadpool

演示： http://jsfiddle.net/NphBK/

这是一个常见的问题。但要解决这个问题，你需要让家长text-align: center和给孩子display: inline-block;

如果你想拥有它的完全平衡，你需要切换到display: table和display: table-cell。

来源

2013-10-31 09:39:45 Dean

感谢您的有益帮助！非常感激！ – Deadpool

回答

相关问题