導航菜單項懸停填充忽略邊距

有趣的標題我知道，不知道該怎麼說。我正在試圖讓我的導航欄項目均勻分佈，而不管字體類型會稍微改變大小。我已經添加了一個：懸停功能，將會隱藏物品背後的背景。這樣做效果很好，但是當我在導航欄的左側和右側添加邊距或邊距以縮進邊時，從邊距/填充空間中省略了深色區域。導航菜單項懸停填充忽略邊距

首先是它的外觀，沒有 '導航UL' 填充。第二個是它的區域被切斷，第三個是我希望它看起來（與'主頁'文本更居中，這是一個粗略的mspaint編輯哈哈

最重要的是，有沒有一種方法可以爲'header nav ul li a {'完美地對齊，所以在它們之間沒有空間？我在懸停發生的地方有幾個px的空間以允許改變字體類型而不破壞均勻間距。

完全在CSS和HTML初學者，所以如果你要幫助我，請只提供您最善良適合初學者的建議

的jsfiddle：https://jsfiddle.net/c1y9axqt/

相關代碼：

CSS

.container { 
    width: 960px; 
    padding: 0 10px; 
    margin: 0 auto; 
} 

.nav_menu { 
    background-color: #005073; 
    background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Safari 5.1 to 6.0 */ 
    background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Opera 11.1 to 12.0 */ 
    background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Firefox 3.6 to 15 */ 
    background-image: linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* Standard syntax */ 
    -webkit-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */ 
    -moz-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */ 
    box-shadow: inset 0px 0px 2px 1x rgba(0,0,0,0.4); /* Standard syntax */ 
    border-style: solid; 
    border-width: 1px; 
    border-color: black; 
    height: 26px; 
} 



nav ul { 
    margin: 0; 
    padding: 0; 
    display: flex; 
    justify-content:space-between; 
} 

nav ul li{ 
    display: inline; 
} 

header nav ul li a { 
    display: inline; 
    padding: 6px 30px 6px 30px; 
    letter-spacing: 1px; 
    text-decoration: none; 
    font-weight: bold; 
    line-height: 26px; 
    color: #EBEAEA; 
    text-shadow: 
    -1px -1px 1px rgba(0, 0, 0, .6), 
    1px -1px 1px rgba(0, 0, 0, .6), 
    -1px 1px 1px rgba(0, 0, 0, .6), 
    1px 1px 1px rgba(0, 0, 0, .6); 

} 


header nav ul li a:hover { 
    color: #E1E0E0; 
    background: rgba(0,0,0,0.2); 
} 

header nav ul li a:active { 
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.7) inset; 
    -moz-box-shadow: 0 0 5px rgba(0,0,0,0.7) inset; 
    box-shadow: 0 0 5px rgba(0,0,0,0.7) inset; 
    color: #CECCCC; 
    background: rgba(0,0,0,0.3); 
}

HTML

<header> 
    <div class="container clearfix">   
     <div class="nav_menu"> 
      <nav> 
       <ul> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">Website Design</a></li>   
        <li><a href="#">Art &amp; Poetry</a></li> 
        <li><a href="#">Blog &amp; Other</a></li> 
        <li><a href="#">Music &amp; More</a></li> 
        <li><a href="#">Shop</a></li> 
       </ul> 
      </nav> 
     </div> <!-- end of container--> 
     </div> <!-- end of navigator menu bar--> 
</header>

的jsfiddle（再笑）：https://jsfiddle.net/c1y9axqt/

來源

2015-11-28 Matt B

謝謝你這麼多傑 –

我已經改變了你的方式略微風格，以保持東西在塊。我想你會在地方爲自己複雜。

正如你可以看到我已經在導航列表中的項目設置了一個寬度使用％來保持它們均勻大小，並給予它們text-align: center;。然後，通過設置錨標籤的背景顏色，可以更輕鬆地更改懸停效果的顏色。

您應該看看Media Queries，以使nav對小屏幕變得敏感。

希望這一切都有幫助，

快樂編碼！

Fiddle here

HTML：

<div id="navContainer"> 
    <nav> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Website Design</a></li>   
      <li><a href="#">Art &amp; Poetry</a></li> 
      <li><a href="#">Blog &amp; Other</a></li> 
      <li><a href="#">Music &amp; More</a></li> 
      <li><a href="#">Shop</a></li> 
     </ul> 
    </nav> 
</div>

CSS：

body { 
margin: 0px 0px; 
} 

#navContainer { 
    width: 100%; 
} 

#navContainer nav { 
    width: 960px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#navContainer ul { 
    list-style: none; 
    list-style-type: none; 
    padding: 0px 0px; 
    margin: 0px 0px; 
} 

#navContainer li { 
    float: left; 
    width: 16.666667%; 
    text-align: center; 
} 

#navContainer a { 
    text-decoration: none; 
    display: block; 
    background-color: #005073; 
    line-height: 26px; 
} 

#navContainer a { 
    text-decoration: none; 
    display: block; 
    background-color: #005073; 
    line-height: 26px; 
    color: #EBEAEA; 
    text-shadow: 
     -1px -1px 1px rgba(0, 0, 0, .6), 
     1px -1px 1px rgba(0, 0, 0, .6), 
     -1px 1px 1px rgba(0, 0, 0, .6), 
     1px 1px 1px rgba(0, 0, 0, .6); 
    font-weight: bold; 
    letter-spacing: 1px; 
    background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Safari 5.1 to 6.0 */ 
     background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Opera 11.1 to 12.0 */ 
     background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Firefox 3.6 to 15 */ 
     background-image: linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* Standard syntax */ 
} 

#navContainer a:hover { 
    color: #E1E0E0; 
    background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)); /* For Safari 5.1 to 6.0 */ 
     background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)); /* For Opera 11.1 to 12.0 */ 
     background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)); /* For Firefox 3.6 to 15 */ 
     background-image: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.2)); /* Standard syntax */ 
}

來源

2015-11-29 00:32:57 Jay

謝謝你這麼多的幫助周杰倫，你的代碼看起來更整潔，很明顯你對此有經驗。任何想法，爲什麼我現在不能在導航欄上添加描邊和插入框陰影？ –

猜你想這個，我只更改了CSS多數民衆贊成

.container { 
    width: 960px; 
    padding: 0 10px; 
    margin: 0 auto; 
    } 


.nav_menu { 
     background-color: #005073; 
     background-image: -webkit-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Safari 5.1 to 6.0 */ 
     background-image: -o-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Opera 11.1 to 12.0 */ 
     background-image: -moz-linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* For Firefox 3.6 to 15 */ 
     background-image: linear-gradient(rgba(0,0,0,.3), rgba(125,125,125,.3)); /* Standard syntax */ 
     -webkit-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */ 
     -moz-box-shadow: inset 0px 0px 2px 1px rgba(0,0,0,0.4); /* For Firefox 3.6 to 15 */ 
     box-shadow: inset 0px 0px 2px 1x rgba(0,0,0,0.4); /* Standard syntax */ 
     border-style: solid; 
     border-width: 1px; 
     border-color: black; 
     height: 26px; 
    } 

    header nav ul li:hover { 
     color: #E1E0E0; 
     background: rgba(0,0,0,0.2); 
    } 
    nav ul { 
     margin: 0; 
     padding: 0; 
     display: flex; 
     justify-content:space-between; 
    } 

    nav ul li{ 
     display: inline; 
     width:160px; 
     text-align:center; 
    } 

    header nav ul li a { 
     display: inline; 
     letter-spacing: 1px; 
     text-decoration: none; 
     font-weight: bold; 
     line-height: 26px; 
     color: #EBEAEA; 
     text-shadow: 
     -1px -1px 1px rgba(0, 0, 0, .6), 
     1px -1px 1px rgba(0, 0, 0, .6), 
     -1px 1px 1px rgba(0, 0, 0, .6), 
     1px 1px 1px rgba(0, 0, 0, .6); 

    } 


    header nav ul li a:hover { 
     color: #E1E0E0; 
     background: rgba(0,0,0,0.2); 
    } 

    header nav ul li a:active { 
     -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.7) inset; 
     -moz-box-shadow: 0 0 5px rgba(0,0,0,0.7) inset; 
     box-shadow: 0 0 5px rgba(0,0,0,0.7) inset; 
     color: #CECCCC; 
     background: rgba(0,0,0,0.3); 
    }

希望它有幫助

來源

2015-11-29 00:08:15 Harshit

導航菜單項懸停填充忽略邊距

回答

相關問題