我知道有趣的标题,不知道怎么说出来。我试图让我的导航栏项目均匀分布,无论字体类型如何,都会略微改变大小。我已经包含了一个:悬停功能,会使项目背后的背景变暗。这很好用,但是当我在nav ul的左边和右边添加边距或填充以缩进边时,边距/填充空间中省略了暗区。
第一个是没有'nav ul'填充的外观。第二个是区域被切断的区域,第三个区域是我希望它看起来的样子(“主页”文本更集中,这是一个粗略的mspaint编辑大声笑。
除此之外,有没有办法让'header nav ul li'{'完全对齐,以便中间没有空格?我在悬停发生的位置之间有几个px的空间,以允许更改font-type而不会破坏偶数间距。
完全是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 & Poetry</a></li>
<li><a href="#">Blog & Other</a></li>
<li><a href="#">Music & 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/
答案 0 :(得分:3)
.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);
}
希望有所帮助
答案 1 :(得分:2)
我已经改变了你对它进行轻微设置的方式来保持块状。我认为你在某些地方为自己复杂了。
正如您所看到的,我使用%在导航列表项目中设置了宽度,以使它们保持均匀大小,并为其指定text-align: center;
。然后通过设置锚标签的背景颜色,可以更轻松地更改悬停效果的颜色。
您应该查看Media Queries以使导航对较小的屏幕响应。
希望这一切都有所帮助,
快乐的编码!
<强> HTML:强>
<div id="navContainer">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Website Design</a></li>
<li><a href="#">Art & Poetry</a></li>
<li><a href="#">Blog & Other</a></li>
<li><a href="#">Music & 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 */
}