CSS新手，导航栏问题
CSS新手，导航栏问题
提问于 2017-11-16 05:26:26
我是CSS的新手，还不能解决问题。我的导航css有几个问题。悬停状态与正常状态不是内联的，最后一项被推到新行上，而不是在单个条形上等间距。
ul {
left: 20%;
top: 10%;
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
overflow: hidden;
background: radial-gradient(circle, #505050, #3E3E3E);
width: 50%;
}
li {
display: inline-block;
float: left;
width: 24%;
margin: 0;
padding: 0;
border-right: 1px solid #232323;
}
/* Remove border from last tab */
li:last-child {
border: none;
}
li:first-child {
border: none;
}
/* Setting up the text on the menu */
li a {
text-align: center;
font: Verdana;
font-size: 16px;
display: inline-block;
color: #EAE0D2;
margin: 0;
padding: 20px 20px;
text-decoration: none;
width: 25%;
}
/* Change the link color on hover */
li a:hover {
background: linear-gradient(#2B2B2B, #232323);
border:none;
width: 83%;
}
/* Color the active tab */
.active {
background: linear-gradient(#3E3E3E, #2B2B2B);
color: #white;
}回答 2
Stack Overflow用户
发布于 2017-11-16 05:34:48
其他方法的另一种方法是计算宽度减去边界，如下所示：
li {
display: inline-block;
float: left;
width: calc( 25% - 3px ); /* 1px per border as specified */
margin: 0;
padding: 0;
border-right: 1px solid #232323;
}Stack Overflow用户
发布于 2017-11-16 05:35:20
将li中的宽度更改为24%
width:24%;http://jsfiddle.net/HBXku/360/
更新:您已经将li设置为宽度的25%，因此链接的大小仅为框大小的25%。我将其更改为80%，它工作得很好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47317521
复制相关文章
相似问题