我是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;
}
发布于 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;
}
发布于 2017-11-16 05:35:20
将li中的宽度更改为24%
width:24%;
http://jsfiddle.net/HBXku/360/
更新:您已经将li设置为宽度的25%,因此链接的大小仅为框大小的25%。我将其更改为80%,它工作得很好。
https://stackoverflow.com/questions/47317521
复制相似问题