CSS3導航不對齊

我已經研究過這個話題，並注意到我不是唯一有這個問題的人;然而，在其他人發現的同一個問題上的答案並沒有解決任何問題。我設置了特定於nav的鏈接，設置了nav和'nav'以將相對位置，margin設置爲0，text-align居中，veritcal與middle對齊，但似乎無法使其居中。CSS3導航不對齊

nav { 
 
    margin: auto; 
 
    margin-bottom: 10px; 
 
    max-width: 35%; 
 
    height: 45px; 
 
} 
 
nav a { 
 
    position: relative; 
 
    padding: 0px 15px; 
 
    margin: 4px 0px; 
 
    font-size: 25px; 
 
    text-decoration: none; 
 
    color: #ECF0F1; 
 
    border: 1px solid black; 
 
}

<nav> 
 
    <a href="#">Home</a><a href="#">Team</a><a href="#">About</a><a href="#">Files</a><a href="#">Forum</a> 
 
</nav>

作爲輕微編輯;爲什麼懸停不能覆蓋導航的整個長度？我只需要調整頂部和底部填充？

Layout

Hover Result

來源

2016-04-28 David Wahlstrom

您是否可以分享您期望的結構和結構的佈局？ – niyasc

溶液＃1（使用Flexbox的/更新的瀏覽器）：

nav { 
 
    display:flex; 
 
    flex-direction:row; 
 
    margin: auto; 
 
    margin-bottom: 10px; 
 
    height: 45px; 
 
    justify-content:center; 
 
} 
 
nav a { 
 
    position: relative; 
 
    padding:0px 15px; 
 
    margin: 4px 0px; 
 
    font-size: 25px; 
 
    text-decoration: none; 
 
    color: #ECF0F1; 
 
}

<nav> 
 
    <a href="#">Home</a> 
 
    <a href="#">Team</a> 
 
    <a href="#">About</a> 
 
    <a href="#">Files</a> 
 
    <a href="#">Forum</a> 
 
</nav>

溶液＃2（用於較舊的瀏覽器太）：

nav { 
 
    margin-bottom:10px; 
 
    height:45px; 
 
    text-align:center; 
 
} 
 
nav a { 
 
    display:inline; 
 
    padding:0px 15px; 
 
    margin: 4px 0px; 
 
    font-size: 25px; 
 
    text-decoration:none; 
 
    color:#ECF0F1; 
 
}

<nav> 
 
    <a href="#">Home</a> 
 
    <a href="#">Team</a> 
 
    <a href="#">About</a> 
 
    <a href="#">Files</a> 
 
    <a href="#">Forum</a> 
 
</nav>

來源

2016-04-28 07:23:45

這是一個很好的解決方案，但不適用於舊版瀏覽器。檢查http://caniuse.com/#search=display%3A%20flex – sQer

已更新請參閱解決方案＃2 –

解決方案2中的文本不在中間 – sQer

編輯代碼

nav{ 
    margin: auto; 
    margin-bottom: 10px; 
    text-align:center; 
    height: 45px; 
}

來源

2016-04-28 07:24:07

也許我在學習期間遺漏了一些東西，但是它在文本對齊去？我問，因爲在我把它放在背景顏色之上。但是我的懸停並沒有覆蓋整個高度 - 但如果這是我需要在另一篇文章中提出的問題，請讓我知道。 –

您可以使用列表作爲標記導航

HTML：

<nav> 
    <ul> 
    <li> 
     <a href="#">Home</a> 
    </li> 
    <li><a href="#">Team</a></li> 
    <li><a href="#">About</a></li> 
    <li><a href="#">Files</a></li> 
    <li><a href="#">Forum</a></li> 
    </ul> 
</nav>

CSS：

nav { 
    vertical-align: middle; 
    margin: auto; 
    margin-bottom: 10px; 
    max-width: 35%; 
    height: 45px; 
} 

nav li { 
    display: inline-block; 
    position: relative; 
    padding: 0px 15px; 
    margin: 4px 0px; 
} 

nav li a { 
    font-size: 25px; 
    text-decoration: none; 
    color: #ECF0F1; 
}

來源

2016-04-28 07:38:58 sQer

CSS3導航不對齊

回答

相關問題