导航菜单项悬停填充忽略边距

有趣的标题我知道，不知道该怎么说。我正在试图让我的导航栏项目均匀分布，而不管字体类型会稍微改变大小。我已经添加了一个：悬停功能，将会隐藏物品背后的背景。这样做效果很好，但是当我在导航栏的左侧和右侧添加边距或边距以缩进边时，从边距/填充空间中省略了深色区域。导航菜单项悬停填充忽略边距

首先是它的外观，没有 '导航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

导航菜单项悬停填充忽略边距

回答

相关问题