導航欄問題

我正在使用導航欄來處理正在處理的項目。我一直在水平導航欄上遇到麻煩，而且我到處尋找正確的解決方案，但沒有成功。導航欄向左移動，所以我在我的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

回答

相關問題